Jekyll version
4.4.1
Jekyll environment
production
Site Variables
{
"tags": {
"how-to": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"welcome": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"example": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"test": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"style": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"sidebar": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"stacked": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"topbar": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"appbar": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"video": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"news": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"includes": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"customization": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"background": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"header": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
]
},
"collections": [
{
"directory": "/home/runner/work/jekyll-theme-profile/jekyll-theme-profile/demo/_docs",
"docs": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Documentation | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Documentation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Documentation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Documentation\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Page flex-column flex-1 min-width-0 py-6\">\n <div class=\"container-xl mx-auto p-responsive\">\n \n \n <h1 class=\"h3-mktg mt-6 mb-4\">Documentation</h1>\n \n <div class=\"markdown-body\">\n \n\n \n \n \n \n \n\n\n\n\n\n\n<div class=\"d-flex flex-wrap gutter\">\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Getting started</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/get-started.html\">Get started</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/configuration.html\">Theme configuration</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/posts.html\">Write a post</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Styles</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\">Appbar style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\">Sidebar style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\">Stacked style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\">Topbar style</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Layouts</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/home.html\">Home Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\">Profile Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\">Linktree Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\">Docs Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\">Landing layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\">Paginate Timeline Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\">Repositories Layout</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Plugins</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">Pagination</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\">Tagging</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\">Category pages</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Includes</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\">Collection Menu</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\">Link Card</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/links.html\">Links</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\">Paginator Navigation</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\">Post Gallery</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\">Post Index</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\">Post Timeline Card</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Advanced</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/custom-styles.html\">Custom styles</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/github-action.html\">Using with a GitHub action</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Other</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/debug.html\">Debug</a></li>\n \n </ul>\n </div>\n</div>\n\n \n</div>\n\n </div>\n <div class=\"flex-1\"></div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Get started | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Get started\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\" />\n<meta property=\"og:description\" content=\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"twitter:title\" content=\"Get started\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\",\"headline\":\"Get started\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Get started</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\">appbar</a>, <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\">sidebar</a>, <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\">stacked</a>, and <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\">topbar</a>,.</p>\n\n<p><img src=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" alt=\"jekyll-theme-profile\" /></p>\n\n<h2 id=\"installation\">Installation</h2>\n\n<p>Add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-theme-profile\"</span>\n</code></pre></div></div>\n\n<p>And then execute:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n<p>Or install it yourself as:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem <span class=\"nb\">install </span>jekyll-theme-profile\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>And add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">PrimerPages/jekyll-theme-profile</span> <span class=\"c1\"># for repository info to be included</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the github profile for the user</span>\n</code></pre></div></div>\n\n<p>Or you can start with a <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/blob/main/demo/_config.yml\">sample config</a> that you can copy and customize.</p>\n\n<h2 id=\"building\">Building</h2>\n\n<p>Build the site and make it available on a local server</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">exec </span>jekyll serve\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/index.html\"\n aria-disabled=\"false\">Documentation</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/configuration.html\"\n aria-disabled=\"false\">Theme configuration</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/get-started.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#installation\">Installation</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#building\">Building</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Theme configuration | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Theme configuration\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\" />\n<meta property=\"og:description\" content=\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Theme configuration\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\",\"headline\":\"Theme configuration\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Theme configuration</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This theme can be set up using the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file, most settings can be overwritten in pages.</p>\n\n<h2 id=\"theme-settings\">Theme settings</h2>\n\n<h3 id=\"setting-the-theme\">Setting the theme</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n</code></pre></div></div>\n\n<h3 id=\"customizing-the-theme\">Customizing the theme</h3>\n\n<h4 id=\"set-the-style-of-the-website\">Set the style of the website</h4>\n\n<p>Select the default style for your theme by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your config file:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n</code></pre></div></div>\n\n<p>You can also set the style of a particular page by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your frontmatter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h5 id=\"sidebar\"><a href=\"/jekyll-theme-profile/sidebar.html\">Sidebar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/sidebar-preview.png\" alt=\"Sidebar image\" /></p>\n\n<h5 id=\"stacked\"><a href=\"/jekyll-theme-profile/stacked.html\">Stacked</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/stacked-preview.png\" alt=\"Stacked image\" /></p>\n\n<h5 id=\"topbar\"><a href=\"/jekyll-theme-profile/topbar.html\">Topbar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/topbar-preview.png\" alt=\"Topbar image\" /></p>\n\n<h5 id=\"appbar\"><a href=\"/jekyll-theme-profile/appbar.html\">Appbar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/appbar-preview.png\" alt=\"Appbar image\" />\nChoosing the right style helps define the user experience and visual flow</p>\n\n<h4 id=\"setting-user-avatar\">Setting user avatar</h4>\n\n<p>By default, the theme will use your github avatar. You can, however, set a custom avatar for your site</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/user-image.jpg</span>\n</code></pre></div></div>\n\n<h4 id=\"customizing-light-and-dark-themes\">Customizing light and dark themes</h4>\n\n<p>This setting specifies the style for the light and dark modes of your site. These styles are taken from <a href=\"https://primer.style/css/storybook/?path=/docs/support-theming--docs\">primer css</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># The themes to use for dark and light</span>\n<span class=\"na\">dark_theme</span><span class=\"pi\">:</span> <span class=\"s\">dark_dimmed</span>\n<span class=\"na\">light_theme</span><span class=\"pi\">:</span> <span class=\"s\">light</span>\n</code></pre></div></div>\n\n<h4 id=\"set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</h4>\n\n<p>You can even change the background by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for both light and dark styles</span>\n</code></pre></div></div>\n\n<p>or set custom overlays for the light and dark themes.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">light</span><span class=\"pi\">:</span> <span class=\"c1\"># custom overlay for light and dark styles</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(255, 255, 255, 0.5)</span>\n <span class=\"na\">dark</span><span class=\"pi\">:</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"set-custom-header-colors\">Set custom header colors</h4>\n\n<p>You can change the header color by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file or page frontmatter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">color</code> The main background color of the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">text</code> The color of text elements within the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">accent</code> Controls the color of accent elements such as links</li>\n <li><code class=\"language-plaintext highlighter-rouge\">image</code> Sets an image in the background of the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">overlay</code> Sets the overlay on top of an image for better visibility of links</li>\n</ul>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"additional-theme-features\">Additional theme features</h4>\n\n<p>These additional features add information to your site from your github user.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the github profile for the user</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">repo_info</code> will show the repository information in the header section</li>\n <li><code class=\"language-plaintext highlighter-rouge\">user_metadata</code> will show metadata associated with your user under your masthead</li>\n <li><code class=\"language-plaintext highlighter-rouge\">profile_link</code> will show a link to your profile</li>\n</ul>\n\n<h2 id=\"social-media-and-seo-optional\">Social media and SEO (optional)</h2>\n\n<h3 id=\"setting-the-social-media-preview-image\">Setting the social media preview image</h3>\n\n<p>You can set the social media image for your site with the setting</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/screenshot.jpg</span>\n</code></pre></div></div>\n\n<p>This works on both yaml frontmatter for a page and in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file. Page settings will override site settings.</p>\n\n<p>Set the default for posts through the default settings in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">posts\"</span>\n <span class=\"na\">values</span><span class=\"pi\">:</span>\n <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">post\"</span>\n <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/blog/:year/:month/:day/:title.html</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h3 id=\"adding-your-socials\">Adding your socials</h3>\n\n<p>Utilize the <code class=\"language-plaintext highlighter-rouge\">social_media</code> section to add links to your various social media profiles. For each platform simply provide your username or user ID to have the corresponding icon and link appear on your profile.</p>\n\n<p><img src=\"/jekyll-theme-profile/media/social-media.png\" alt=\"Social Media\" class=\"border\" /></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">social_media</span><span class=\"pi\">:</span>\n <span class=\"na\">behance</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">dribbble</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">docker</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">facebook</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">github</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">hackerrank</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">instagram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">keybase</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">linkedin</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">mail</span><span class=\"pi\">:</span> <span class=\"s\">email@address</span>\n <span class=\"na\">mastodon</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">medium</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">stackoverflow</span><span class=\"pi\">:</span> <span class=\"s\">your_user_id</span>\n <span class=\"na\">telegram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">threads</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">tiktok</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">twitter</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">unsplash</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">vk</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">vscode</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">youtube</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">x</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n</code></pre></div></div>\n\n<p>You can also set the icon color. If you don’t set an icon color, the original icon colors will be used.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">icon_color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#959da5\"</span>\n</code></pre></div></div>\n\n<h2 id=\"navigation-links-optional\">Navigation links (optional)</h2>\n\n<p>You can add navigation links that will show up in your header bar and in navigation menus.</p>\n\n<p>These will be visible in all pages, and are the main elements in the <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\">landing layout</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Navigation links</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name of the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">url</code> The url of the link</li>\n</ul>\n\n<h2 id=\"links-optional\">Links (optional)</h2>\n\n<p>In the <code class=\"language-plaintext highlighter-rouge\">links</code> section, you can add links to showcase various pages on the web or your website.</p>\n\n<p>These will show in <a href=\"/jekyll-theme-profile/docs/layouts/home.html\">home</a>, <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a>, and <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\">linktree</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># List of links for link cards</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">All blog posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/blog-post-icon.png</span> <span class=\"c1\"># optional</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Category</span>\n <span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Browse all categories in posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name/title to show for the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">description</code> (optional) Additional text to show for the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">url</code> (optional) The URL of the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">thumbnail</code> (optional) The thumbnail image to show</li>\n <li><code class=\"language-plaintext highlighter-rouge\">octicon</code> (optional) Instead of a thumbnail, use an octicon icon</li>\n</ul>\n\n<h2 id=\"repositories-optional\">Repositories (optional)</h2>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">repositories</code> section allows you to display your GitHub repositories on your page. You can sort them by stars or latest pushes, set a limit to the number of repositories displayed, and exclude archived, forked, or specific repositories from the list</p>\n\n<p>These show in the <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a> and <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\">repositories</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Repositories to show on home page</span>\n<span class=\"na\">repositories</span><span class=\"pi\">:</span>\n <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">stars</span> <span class=\"c1\"># pushed or stars</span>\n <span class=\"na\">limit</span><span class=\"pi\">:</span> <span class=\"m\">24</span>\n <span class=\"na\">exclude</span><span class=\"pi\">:</span>\n <span class=\"na\">archived</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">forks</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">repositories</span><span class=\"pi\">:</span>\n <span class=\"c1\"># - list of repositories to exclude</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">sort_by</code> What to sort repositories by, either latest pushed or number of stars</li>\n <li><code class=\"language-plaintext highlighter-rouge\">limit</code> max number of repositories to show</li>\n <li><code class=\"language-plaintext highlighter-rouge\">exclude</code> Repositories to exclude from your site</li>\n</ul>\n\n<h2 id=\"post-settings\">Post settings</h2>\n\n<h3 id=\"related\">Related</h3>\n\n<p>Each post can show related posts below it. Choose either <code class=\"language-plaintext highlighter-rouge\">tags</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> or <code class=\"language-plaintext highlighter-rouge\">random</code> or a combination.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/get-started.html\"\n aria-disabled=\"false\">Get started</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/posts.html\"\n aria-disabled=\"false\">Write a post</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/configuration.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#theme-settings\">Theme settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-theme\">Setting the theme</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#customizing-the-theme\">Customizing the theme</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-the-style-of-the-website\">Set the style of the website</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#sidebar\">Sidebar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#stacked\">Stacked</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#topbar\">Topbar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#appbar\">Appbar</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h4\"><a href=\"#setting-user-avatar\">Setting user avatar</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#customizing-light-and-dark-themes\">Customizing light and dark themes</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-custom-header-colors\">Set custom header colors</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#additional-theme-features\">Additional theme features</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#social-media-and-seo-optional\">Social media and SEO (optional)</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-social-media-preview-image\">Setting the social media preview image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#adding-your-socials\">Adding your socials</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#navigation-links-optional\">Navigation links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#links-optional\">Links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#repositories-optional\">Repositories (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#post-settings\">Post settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#related\">Related</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Write a post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Write a post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\" />\n<meta property=\"og:description\" content=\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Write a post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\",\"headline\":\"Write a post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Write a post</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<h2 id=\"front-matter\">Front matter</h2>\n\n<p>All blog posts must begin with front matter which is typically used to set a layout or other meta data. For a simple example, this can just be empty:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">welcome</span><span class=\"nv\"> </span><span class=\"s\">to</span><span class=\"nv\"> </span><span class=\"s\">Jekyll!\"</span>\n<span class=\"nn\">---</span>\n\n<span class=\"gh\"># Welcome</span>\n\n<span class=\"gs\">**Hello world**</span>, this is my first Jekyll blog post.\n\nI hope you like it!\n</code></pre></div></div>\n\n<p>Here’s a list of variables for this theme</p>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Specifies the layout file to use. Use the layout file name without the file extension. <br /><br /> Go to <a href=\"/jekyll-theme-profile/docs/index.html\">docs</a> to learn about options</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">permalink</code></td>\n <td>If you need or processed blog post URLs to be something other than the site-wide default (<code class=\"language-plaintext highlighter-rouge\">/year/month/day/title.html</code>), then you can set this variable and it will be used as the final URL</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">published</code></td>\n <td>Set to false if you don’t want a specific post to show up when the site is generated</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n <td>A date here overrides the date from the name of the post. This can be used to ensure correct sorting of posts. A date is specified in the format <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD HH:MM:SS +/-TTTT</code>: hours, minutes,seconds, and timezone offset are optional</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n <td>Instead of placing posts inside of folders, you can specify one or more categories that the post belongs to. When the site is generated the post will act as though it had been set with these categories normally. Categories (plural key) can be specified as a YAML list or a space-separated string</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n <td>Similar to categories, one or multiple tags can be added to a post. Also like categories, tags can be specified as a YAML list or a space-separated string</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n <td>A longer description used for hte description meta tag</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n <td>URL to an image associated with the post for SEO</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n <td>Post-specific author information</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">locale</code></td>\n <td>Post-specific locale information</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code></td>\n <td>You can access a snippet of a posts’ content by using <code class=\"language-plaintext highlighter-rouge\">excerpt</code> variable on a post. By default this is the first paragraph of content in the post, but can be customized by using <code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code>. <br /><br />Example <code class=\"language-plaintext highlighter-rouge\">excerpt_separator: <!--more--></code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"including-images-and-resources\">Including images and resources</h2>\n\n<p>At some point, you’ll want to include images, downloads, or other digital assets along with your text content. One common solution is to create a folder in the root of the project directory called something like <code class=\"language-plaintext highlighter-rouge\">assets</code>, into which any images, files or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. The best way to do this depends on the way your site’s (sub)domain and path are configured, but here are some simple examples in Markdown:</p>\n\n<p>Including an image asset in a post:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... which is shown in the screenshot below:\n<span class=\"p\">![</span><span class=\"nv\">My helpful screenshot</span><span class=\"p\">](</span><span class=\"sx\">/assets/screenshot.jpg</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Linking to a PDF for readers to download:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... you can <span class=\"p\">[</span><span class=\"nv\">get the PDF</span><span class=\"p\">](</span><span class=\"sx\">/assets/mydoc.pdf</span><span class=\"p\">)</span> directly.\n</code></pre></div></div>\n\n<h2 id=\"tags-and-categories\">Tags and Categories</h2>\n\n<p>Jekyll has first class support for <em>tags</em> and <em>categories</em> in blog posts.</p>\n\n<h3 id=\"tags\">Tags</h3>\n\n<p>Tags for a post are defined in the post’s front matter using either the key <code class=\"language-plaintext highlighter-rouge\">tag</code> for a single entry or <code class=\"language-plaintext highlighter-rouge\">tags</code> for multiple entries.\nSince Jekyll expects multiple items mapped to the key <code class=\"language-plaintext highlighter-rouge\">tags</code>, it will automatically split a string entry if it contains whitespace. For example, while front matter <code class=\"language-plaintext highlighter-rouge\">tag: classic hollywood</code> will be processed into a singular entity <code class=\"language-plaintext highlighter-rouge\">\"classic hollywood\"</code>, front matter <code class=\"language-plaintext highlighter-rouge\">tags: classic hollywood</code> will be processed into an array of entries <code class=\"language-plaintext highlighter-rouge\">[\"classic\", \"hollywood\"]</code>.</p>\n\n<p>Irrespective of the front matter key chosen, Jekyll stores the metadata mapped to the plural key which is exposed to Liquid templates.</p>\n\n<p>By default the theme will show posts related by tags or categories with the setting:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># related</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n<p>These show up as “related posts” underneath a post.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\">tagging</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> plugin.</p>\n\n<h3 id=\"categories\">Categories</h3>\n\n<p>Categories of a post work similar to the tags above:</p>\n\n<ul>\n <li>They can be defined via the front matter using keys <code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> (that follow the same logic as for tags)</li>\n <li>All categories registered in the site are exposed to Liquid templates via <code class=\"language-plaintext highlighter-rouge\">site.categories</code> which can be iterated over (similar to the loop for tags above.)</li>\n</ul>\n\n<p><em>The similarity between categories and tags however, ends there.</em></p>\n\n<p>Unlike tags, categories for posts can also be defined by a post’s file path. Any directory above _posts will be read-in as a category. For example, if a post is at path <code class=\"language-plaintext highlighter-rouge\">movies/horror/_posts/2019-05-21-bride-of-chucky.markdown</code>, then <code class=\"language-plaintext highlighter-rouge\">movies</code> and <code class=\"language-plaintext highlighter-rouge\">horror</code> are automatically registered as categories for that post.</p>\n\n<p>When the post also has front matter defining categories, they just get added to the existing list if not present already.</p>\n\n<p>The hallmark difference between categories and tags is that categories of a post may be incorporated into the generated URL for the post, while tags cannot be.</p>\n\n<p>Therefore, depending on whether front matter has <code class=\"language-plaintext highlighter-rouge\">category: classic hollywood</code>, or <code class=\"language-plaintext highlighter-rouge\">categories: classic hollywood</code>, the example post above would have the URL as either <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic%20hollywood/2019/05/21/bride-of-chucky.html</code> or <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic/hollywood/2019/05/21/bride-of-chucky.html</code> respectively.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\">category pages</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> plugin.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/configuration.html\"\n aria-disabled=\"false\">Theme configuration</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\"\n aria-disabled=\"false\">Appbar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/posts.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#front-matter\">Front matter</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#including-images-and-resources\">Including images and resources</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tags-and-categories\">Tags and Categories</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#tags\">Tags</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#categories\">Categories</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Appbar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Appbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/appbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/appbar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Appbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Appbar style\",\"image\":\"https://primerpages.github.io/media/appbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Appbar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/appbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>appbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A fixed top navigation bar</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">appbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>appbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an appbar as a <a href=\"/jekyll-theme-profile/appbar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/appbar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/appbar-tablet.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/posts.html\"\n aria-disabled=\"false\">Write a post</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\"\n aria-disabled=\"false\">Sidebar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/appbar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Sidebar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Sidebar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/sidebar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/sidebar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Sidebar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Sidebar style\",\"image\":\"https://primerpages.github.io/media/sidebar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Sidebar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/sidebar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>sidebar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A collapsible side navigation bar that collapses</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">sidebar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>sidebar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an sidebar as a <a href=\"/jekyll-theme-profile/sidebar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/sidebar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/sidebar-laptop.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\"\n aria-disabled=\"false\">Appbar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\"\n aria-disabled=\"false\">Stacked style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/sidebar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Stacked style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Stacked style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/stacked-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/stacked-preview.png\" />\n<meta property=\"twitter:title\" content=\"Stacked style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Stacked style\",\"image\":\"https://primerpages.github.io/media/stacked-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Stacked style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/stacked-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>stacked</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A top header with image</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">stacked</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>stacked</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an stacked as a <a href=\"/jekyll-theme-profile/stacked.html\">home</a>, <a href=\"/jekyll-theme-profile/page/stacked.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/stacked-laptop.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\"\n aria-disabled=\"false\">Sidebar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\"\n aria-disabled=\"false\">Topbar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/stacked.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Topbar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Topbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/topbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/topbar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Topbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Topbar style\",\"image\":\"https://primerpages.github.io/media/topbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Topbar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/topbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>topbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A fixed top navigation bar</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">topbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>topbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an topbar as a <a href=\"/jekyll-theme-profile/appbar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/appbar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/topbar-tablet.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\"\n aria-disabled=\"false\">Stacked style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/home.html\"\n aria-disabled=\"false\">Home Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/topbar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Home Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Home Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta property=\"og:description\" content=\"The home layout is the same thing as the profile layout.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Home Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The home layout is the same thing as the profile layout.\",\"headline\":\"Home Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Home Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>home</strong> layout is the same thing as the <code class=\"language-plaintext highlighter-rouge\">profile</code> layout.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a> for details and options.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\"\n aria-disabled=\"false\">Topbar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\"\n aria-disabled=\"false\">Profile Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/home.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Profile Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Profile Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\" />\n<meta property=\"og:description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Profile Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\",\"headline\":\"Profile Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Profile Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>profile</strong> layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Profile layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Profile layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">profile</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">default</code></td>\n <td>Layout style (<code class=\"language-plaintext highlighter-rouge\">default</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, <code class=\"language-plaintext highlighter-rouge\">stacked</code>)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">user_image</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.user_image</code> or <code class=\"language-plaintext highlighter-rouge\">site.github.owner.avatar_url</code></td>\n <td>Custom user profile image</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n <td>An array of social/profile links</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n <td>Collection of posts to display in the blog section</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n <td>Number of posts to display</td>\n </tr>\n </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>The text to display for the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>The URL the link should point to</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">icon</code></td>\n <td>A custom icon for the link (optional)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a profile section with an image and name.</li>\n <li>Includes social/profile links if provided.</li>\n <li>Shows a timeline of blog posts from the specified collection.</li>\n <li>Optionally displays repositories if <code class=\"language-plaintext highlighter-rouge\">site.repositories</code> is enabled.</li>\n <li>Supports different layout styles (<code class=\"language-plaintext highlighter-rouge\">default</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, <code class=\"language-plaintext highlighter-rouge\">stacked</code>).</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Profile page with user information and links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/custom-user.jpg</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">GitHub</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/username</span>\n <span class=\"na\">icon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Twitter</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://twitter.com/username</span>\n <span class=\"na\">icon</span><span class=\"pi\">:</span> <span class=\"s\">twitter</span>\n<span class=\"na\">collection</span><span class=\"pi\">:</span> <span class=\"s\">site.posts</span>\n<span class=\"na\">posts_limit</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/profile.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure all image URLs are correct and accessible.</li>\n <li>Icons require the correct library to be included in your theme.</li>\n <li>The layout is responsive and should work well across different screen sizes.</li>\n <li>Custom styling can be added using additional CSS overrides in your theme.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for rendering the profile header.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for displaying social links.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> include for listing blog posts.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include for rendering repositories.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Profile layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/home.html\"\n aria-disabled=\"false\">Home Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\"\n aria-disabled=\"false\">Linktree Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/profile.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Linktree Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Linktree Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta property=\"og:description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Linktree Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\",\"headline\":\"Linktree Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Linktree Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>linktree</strong> layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Linktree layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Linktree layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">linktree</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">[]</code></td>\n <td>An array of link objects to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">background_image</code></td>\n <td>None</td>\n <td>URL of a background image for the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td>None</td>\n <td>Title to display at the top of the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">css_style</code></td>\n <td>None</td>\n <td>Custom CSS to apply to the page</td>\n </tr>\n </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>The text to display for the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>The URL the link should point to</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n <td>URL of an image to use as the link’s icon (optional)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n <td>Name of an Octicon to use as the link’s icon (optional)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The layout creates a responsive grid of link cards.</li>\n <li>Each link is displayed as a card with an optional thumbnail or icon.</li>\n <li>The layout includes a theme toggle button for light/dark mode.</li>\n <li>If specified, it displays a title and applies custom CSS.</li>\n</ol>\n\n<h2 id=\"usage-1\">Usage</h2>\n\n<p>This example shows a basic Linktree page with various links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My website</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://avatars.githubusercontent.com/u/6098197?v=4</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Github Dashboard</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://dashboard.althack.dev</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/athackst/dashboard/raw/main/assets/dashboard.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Github Profile</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/athackst</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Dockerhub</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://hub.docker.com/u/althack</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://img.icons8.com/?size=100&id=cdYUlRaag9G9&format=png&color=000000</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">VSCode Extensions</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://marketplace.visualstudio.com/publishers/althack</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://img.icons8.com/?size=100&id=0OQR1FYCuA9f&format=png&color=000000</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Ruby Gems</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://rubygems.org/profiles/althack</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">ruby</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Python packages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://pypi.org/user/athackst/</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://pypi.org/static/images/logo-small.8998e9d1.svg</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/linktree.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n <li><strong>Background Image</strong>: Add a <code class=\"language-plaintext highlighter-rouge\">background_image</code> parameter to set a custom background.</li>\n <li><strong>Custom CSS</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">css_style</code> parameter to add custom CSS directly in the front matter.</li>\n <li><strong>Link Icons</strong>: Use either <code class=\"language-plaintext highlighter-rouge\">thumbnail</code> for custom images or <code class=\"language-plaintext highlighter-rouge\">octicon</code> for GitHub’s Octicons.</li>\n <li><strong>Layout Variations</strong>: The layout supports different styles like topbar, appbar, sidebar, and stacked. Use the appropriate URL to see these variations.</li>\n</ol>\n\n<p>The following example demonstrates how to customize the Linktree layout with a background image and custom CSS:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">background_image</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com/assets/img/cover-1920.jpg</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Linktree</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">.octicon {</span>\n <span class=\"s\">fill: black;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">a {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">a:hover {</span>\n <span class=\"s\">text-decoration: none;</span>\n <span class=\"s\">color: var(--color-fg-default);</span>\n <span class=\"s\">}</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with topbar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/topbar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/topbar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with appbar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/appbar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/appbar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with sidebar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/sidebar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/sidebar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with header stacked</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/stacked</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/stacked-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example custom background</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/background</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/icon-bg.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Linktree page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/linktree</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/links.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Profile page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/profile</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/user-image.jpg</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Repositories page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/repositories</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/repositories.png</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/linktree-custom.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure all image URLs are correct and accessible.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> property requires the Octicons library to be included in your theme.</li>\n <li>Custom CSS can override the theme’s default styles, so use it carefully.</li>\n <li>The layout is responsive and should work well on various screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li>The <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include for rendering individual links.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for the theme toggle functionality.</li>\n <li>Octicons for icon display.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Linktree layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\"\n aria-disabled=\"false\">Profile Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\"\n aria-disabled=\"false\">Docs Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/linktree.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage-1\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Docs Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Docs Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta property=\"og:description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Docs Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\",\"headline\":\"Docs Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Docs Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>docs</strong> layout is ideal for documentation pages and follows the document style on <a href=\"https://docs.github.com\">GitHub Docs</a>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Docs layout in your Jekyll site, create a new file in your <code class=\"language-plaintext highlighter-rouge\">_docs</code> collection with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Your Documentation Title</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">docs</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">collections</span><span class=\"pi\">:</span>\n <span class=\"na\">docs</span><span class=\"pi\">:</span>\n <span class=\"na\">output</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">order</span>\n<span class=\"na\">defaults</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n <span class=\"na\">values</span><span class=\"pi\">:</span>\n <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/docs/:path</span>\n <span class=\"na\">edit_url</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">https://github.com/{user}/{repo}/edit/{branch}\"</span> <span class=\"c1\"># replace with your user, repo, and branch for edit links</span>\n <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h2 id=\"features\">Features</h2>\n\n<ul>\n <li>Automatically generates a table of contents (<code class=\"language-plaintext highlighter-rouge\">toc: true</code>)</li>\n <li>Uses a default image for social sharing</li>\n <li>Sorts documentation pages by the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter</li>\n <li>Adds a “Edit this page” link if <code class=\"language-plaintext highlighter-rouge\">edit_url</code> is set</li>\n</ul>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/docs/index.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure your documentation files are placed in the <code class=\"language-plaintext highlighter-rouge\">_docs</code> folder</li>\n <li>Use the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter to control the sorting of your documentation pages</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">toc</code> option automatically generates a table of contents for each page</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\"\n aria-disabled=\"false\">Linktree Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\"\n aria-disabled=\"false\">Landing layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/docs.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#features\">Features</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Landing layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Landing layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta property=\"og:description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Landing layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\",\"headline\":\"Landing layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Landing layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>landing</strong> layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Landing layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Landing layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">landing</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">none</code></td>\n <td>Layout style customization (optional)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">repo_info</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.repo_info</code></td>\n <td>Displays repository information if enabled</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">nav</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.nav</code></td>\n <td>Displays site navigation if enabled</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">social_media</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.social_media</code></td>\n <td>Displays social media links if provided</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a masthead for branding and introduction.</li>\n <li>Optionally includes a repository information card.</li>\n <li>Shows navigation links if configured.</li>\n <li>Includes a section for social media links.</li>\n <li>Provides a customizable structure for content placement.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Landing page setup:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">none</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">social_media</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/landing.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure <code class=\"language-plaintext highlighter-rouge\">repo_info</code>, <code class=\"language-plaintext highlighter-rouge\">nav</code>, and <code class=\"language-plaintext highlighter-rouge\">social_media</code> are configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if needed.</li>\n <li>Custom styles can be applied by modifying the theme’s CSS.</li>\n <li>The layout is responsive and should work well on all screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for branding.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for theme switching.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">mini-repo-info-card.html</code> include for repository info.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">nav.html</code> include for navigation.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for social media links.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Landing layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\"\n aria-disabled=\"false\">Docs Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"\n aria-disabled=\"false\">Paginate Timeline...</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/landing.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Paginate Timeline Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Timeline Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta property=\"og:description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Paginate Timeline Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\",\"headline\":\"Paginate Timeline Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Paginate Timeline Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>paginate_timeline</strong> layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate Timeline layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>Jekyll’s pagination feature must be enabled in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. For example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page:num\"</span>\n</code></pre></div></div>\n\n<p>This config will split your post list into chunks of five items per page.</p>\n\n<p>The Paginate Layout must be specified in the index of the start of this path. For the example above, it should be in <code class=\"language-plaintext highlighter-rouge\">/blog/index.html</code>.</p>\n\n<blockquote>\n <p>[!NOTE]\nThe path should be <em>absolute</em> and start with a <code class=\"language-plaintext highlighter-rouge\">/</code>, otherwise the index links will not work correctly.</p>\n</blockquote>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Paginate Timeline layout supports the following:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td>None</td>\n <td>The heading to display on the timeline page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n <td>None</td>\n <td>You can write page content below the front matter. It will appear above the timeline.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.pagination.permalink</code> or <code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n <td>Path structure for pagination pages (e.g., <code class=\"language-plaintext highlighter-rouge\">page:num</code>)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n <td>Number of posts to display per page, if desired. Can also be overridden in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Page Content</strong>: The layout renders any Markdown or HTML in <code class=\"language-plaintext highlighter-rouge\">{{ content }}</code> before displaying the timeline.</li>\n <li><strong>Post Timeline</strong>: It includes the <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> partial, which loops through the specified collection (typically <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>) and renders each post.</li>\n <li><strong>Pagination Links</strong>: At the bottom of the page, you’ll find controls for navigating to previous and next pages, as well as direct links to individual pages.</li>\n <li><strong>Custom Index Path</strong>: The layout attempts to resolve <code class=\"language-plaintext highlighter-rouge\">paginator.first_page_path</code> or a fallback URL for linking back to the main blog index.</li>\n <li><strong>Site-Level Configuration</strong>: The layout relies on your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> settings (<code class=\"language-plaintext highlighter-rouge\">paginate</code>, <code class=\"language-plaintext highlighter-rouge\">paginate_path</code>, etc.) to define pagination behavior.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>Below is a minimal usage example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my blog! Below is a list of the latest posts. Use the pagination buttons to navigate.</span>\n</code></pre></div></div>\n\n<p><code class=\"language-plaintext highlighter-rouge\">_config.yml</code></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">blog/page:num\"</span>\n</code></pre></div></div>\n\n<p>With this configuration:</p>\n<ol>\n <li>Each page shows 5 posts.</li>\n <li>Pagination paths follow the pattern <code class=\"language-plaintext highlighter-rouge\">/blog/page1</code>, <code class=\"language-plaintext highlighter-rouge\">/blog/page2</code>, etc.</li>\n</ol>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li><strong>Jekyll Pagination Plugin</strong>: Ensure you have the <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">jekyll-paginate</a> plugin configured (depending on your Jekyll version).</li>\n <li><strong>Page vs. Post</strong>: Paginated content is typically drawn from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>, but you can specify a different collection if desired.</li>\n <li><strong>Responsive</strong>: The layout is designed to adapt to mobile, tablet, and desktop screens.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<ol>\n <li><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> (included): Used to render the collection of posts.</li>\n <li><a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code></a> (included): Used to render each post.</li>\n <li><a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">pagination</a>: Make sure your Jekyll site is set up for pagination, or the layout’s pagination features will not work.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Paginate Timeline layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\"\n aria-disabled=\"false\">Landing layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\"\n aria-disabled=\"false\">Repositories Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/paginate_timeline.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Repositories Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Repositories Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta property=\"og:description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Repositories Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\",\"headline\":\"Repositories Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Repositories Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>repositories</strong> layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Repositories layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Repositories layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">repositories</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">Repositories</code></td>\n <td>The title displayed on the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n <td>Optional</td>\n <td>Additional text or descriptions displayed before the repositories</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a title for the repositories page.</li>\n <li>Optionally includes descriptive content before the repository list.</li>\n <li>Dynamically loads and displays repositories using the <code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include.</li>\n <li>Supports Jekyll’s standard content management for additional customization.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Repositories page with a custom title and description:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Projects</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my open-source projects repository page. Here you can find all my latest projects.</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/repositories.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">repositories</code> is <a href=\"/jekyll-theme-profile/docs/configuration.html#repositories-optional\">configured</a> in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</li>\n <li>You may need to include the <code class=\"language-plaintext highlighter-rouge\">jekyll-github-metadata</code> plugin in your Gemfile and/or included in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.\n ```\n plugins:\n <ul>\n <li>jekyll-github-metadata\n ```</li>\n </ul>\n </li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"\n aria-disabled=\"false\">Paginate Timeline...</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"\n aria-disabled=\"false\">Pagination</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/repositories.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Pagination | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Pagination\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Pagination\" />\n<meta property=\"og:description\" content=\"Pagination\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Pagination\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Pagination\",\"headline\":\"Pagination\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Pagination</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h1 id=\"pagination\">Pagination</h1>\n\n<p><code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> is a Jekyll plugin that adds pagination functionality to your site, allowing posts to be split across multiple pages instead of displaying all posts on a single page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>\n <p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n <div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-paginate\"</span>\n<span class=\"k\">end</span>\n</code></pre></div> </div>\n\n <p>Then, install the plugin:</p>\n\n <div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div> </div>\n </li>\n <li>\n <p>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file:</p>\n\n <div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-paginate settings</span>\n<span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span> <span class=\"c1\"># Number of posts per page</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page:num\"</span> <span class=\"c1\"># URL structure for paginated pages</span>\n</code></pre></div> </div>\n </li>\n <li>\n <p>(optional) Add a index page <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code></p>\n\n <div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code> ---\n title: My Blog\n layout: paginate\n ---\n</code></pre></div> </div>\n </li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/pagination/\">Jekyll Pagination Documentation</a></li>\n <li><a href=\"https://github.com/jekyll/jekyll-paginate\">jekyll-paginate Repository</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\"\n aria-disabled=\"false\">Repositories Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\"\n aria-disabled=\"false\">Tagging</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/pagination.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#pagination\">Pagination</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Tagging | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tagging\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta property=\"og:description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Tagging\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\",\"headline\":\"Tagging\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Tagging</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> is a plugin that enables better tag support in Jekyll sites.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>Add the following line to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem 'jekyll-tagging`\n</code></pre></div></div>\n\n<ol>\n <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">tag_page_layout</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n<span class=\"na\">tag_page_dir</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n</code></pre></div></div>\n\n<ol>\n <li>(optional) Add a tag index page <code class=\"language-plaintext highlighter-rouge\">tags/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Tags\nlayout: tag_index\n---\n</code></pre></div></div>\n\n<ol>\n <li>Add tags to your posts</li>\n</ol>\n\n<p>To assign tags to a post, include them in the front matter</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ntags: [jekyll, tutorial, plugins]\n---\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/posts/#tags\">Jekyll tags</a></li>\n <li><a href=\"https://github.com/pattex/jekyll-tagging\">jekyll-tagging repository</a></li>\n <li><a href=\"/jekyll-theme-profile/docs/posts.html#tags\">Posts documentation</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"\n aria-disabled=\"false\">Pagination</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"\n aria-disabled=\"false\">Category pages</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/tagging.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Category pages | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category pages\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta property=\"og:description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Category pages\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\",\"headline\":\"Category pages\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Category pages</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>group :jekyll_plugins do\n gem \"jekyll-paginate\"\n gem \"jekyll-category-pages\"\nend\n</code></pre></div></div>\n\n<p>and install it</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle install\n</code></pre></div></div>\n\n<ol>\n <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-category-pages settings</span>\n<span class=\"na\">category_path</span><span class=\"pi\">:</span> <span class=\"s\">category</span>\n<span class=\"na\">category_layout</span><span class=\"pi\">:</span> <span class=\"s\">category_layout.html</span>\n</code></pre></div></div>\n\n<ol>\n <li>(optional) Add a tag index page <code class=\"language-plaintext highlighter-rouge\">category/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Category\nlayout: category_index\n---\n</code></pre></div></div>\n\n<ol>\n <li>Add a category to your post</li>\n</ol>\n\n<p>To assign a category to a post, include it in the front matter</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ncategory: sample\n---\n</code></pre></div></div>\n\n<p>Or place the post within a directory. The directory names will be automatically registered as categories for the post.</p>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/posts/#categories\">Jekyll categories</a></li>\n <li><a href=\"https://github.com/field-theory/jekyll-category-pages\">jekyll-category-pages repository</a></li>\n <li><a href=\"/jekyll-theme-profile/docs/posts.html#categories\">Posts</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\"\n aria-disabled=\"false\">Tagging</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\"\n aria-disabled=\"false\">Collection Menu</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/category-pages.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Collection Menu | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Collection Menu\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta property=\"og:description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Collection Menu\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\",\"headline\":\"Collection Menu\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Collection Menu</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Collection Menu</strong> include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their <code class=\"language-plaintext highlighter-rouge\">category</code> field. It is particularly useful for displaying structured documentation, guides, or other content collections.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Documentation\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"docs-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.docs</code></td>\n <td>The Jekyll collection to display in the menu.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>None</td>\n <td>Display name for the collection in the menu header.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n <td>None</td>\n <td>Index page object for the collection, used as the main link in the menu header.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">id</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">collection-menu</code></td>\n <td>HTML <code class=\"language-plaintext highlighter-rouge\">id</code> attribute for the <code class=\"language-plaintext highlighter-rouge\"><details></code> element; useful for multiple instances.</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"example\">Example</h2>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Tutorials\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"tutorials-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Dropdown Menu:</strong>\n <ul>\n <li>Uses Primer CSS’s <code class=\"language-plaintext highlighter-rouge\">details-overlay</code> pattern to create a dropdown.</li>\n <li>Clicking the burger icon opens the menu; clicking outside or pressing the close button closes it.</li>\n </ul>\n </li>\n <li><strong>Collection Items Grouped by Category:</strong>\n <ul>\n <li>The menu groups collection documents by their <code class=\"language-plaintext highlighter-rouge\">category</code> front matter field.</li>\n <li>Each category is displayed as a section header.</li>\n </ul>\n </li>\n <li><strong>Current Page Highlighting:</strong>\n <ul>\n <li>The current page is marked with <code class=\"language-plaintext highlighter-rouge\">aria-current=\"page\"</code> when its URL matches the menu item.</li>\n </ul>\n </li>\n <li><strong>Optional Index Link:</strong>\n <ul>\n <li>If <code class=\"language-plaintext highlighter-rouge\">index</code> is provided, the collection name in the header becomes a link to the index page.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n <li><strong>Primer CSS:</strong> Classes like <code class=\"language-plaintext highlighter-rouge\">details-overlay</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, <code class=\"language-plaintext highlighter-rouge\">SideNav</code> are part of Primer’s styling system.</li>\n <li><strong>Octicons:</strong> For the close button icon.</li>\n <li><strong>jQuery:</strong> Required for the custom close button behavior.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n <li><strong>Change Menu Appearance:</strong>\n <ul>\n <li>Adjust Primer CSS classes like <code class=\"language-plaintext highlighter-rouge\">SideNav</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, or <code class=\"language-plaintext highlighter-rouge\">AppHeader-link</code>.</li>\n </ul>\n </li>\n <li><strong>Adjust Categories:</strong>\n <ul>\n <li>Ensure your collection items have a <code class=\"language-plaintext highlighter-rouge\">category</code> field in their front matter for grouping.</li>\n </ul>\n </li>\n <li><strong>Modify Close Behavior:</strong>\n <ul>\n <li>The script attached to the close button can be adapted or replaced with custom behavior if needed.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">id</code> parameter allows multiple instances of this menu to coexist on a page without conflicts.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">aria-haspopup</code> and <code class=\"language-plaintext highlighter-rouge\">aria-current</code> attributes enhance accessibility for the dropdown menu and navigation links.</li>\n <li>Ensure your site includes <strong>Primer CSS</strong> and <strong>jQuery</strong> for proper styling and behavior.</li>\n</ul>\n\n<p>By integrating <code class=\"language-plaintext highlighter-rouge\">collection-menu.html</code>, you can create a well-structured and accessible collection menu that enhances site navigation.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"\n aria-disabled=\"false\">Category pages</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\"\n aria-disabled=\"false\">Link Card</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/collection-menu.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Link Card | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Link Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta property=\"og:description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Link Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\",\"headline\":\"Link Card\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Link Card</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">link_object</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing a <code class=\"language-plaintext highlighter-rouge\">link</code> object with the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Required</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>Yes</td>\n <td>The name or title of the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>No</td>\n <td>The URL for the link. If not provided, the card will be displayed as text-only</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n <td>No</td>\n <td>The path to an image to be used as a thumbnail</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n <td>No</td>\n <td>A brief description of the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n <td>No</td>\n <td>An Octicon name to display instead of a thumbnail</td>\n </tr>\n </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include checks if a URL is provided for the link.</li>\n <li>If a URL is present:\n <ul>\n <li>It creates a clickable card with hover effects.</li>\n <li>Displays a thumbnail image or Octicon if provided.</li>\n <li>Shows the link name and description (if available).</li>\n </ul>\n </li>\n <li>If no URL is present:\n <ul>\n <li>It creates a non-clickable text card.</li>\n <li>Displays a thumbnail image if provided.</li>\n <li>Shows the link name and description (if available).</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file may depend on:</p>\n\n<ol>\n <li>Octicons: The GitHub icon set, used if an <code class=\"language-plaintext highlighter-rouge\">octicon</code> property is specified.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The include uses Liquid tags and filters, such as <code class=\"language-plaintext highlighter-rouge\">relative_url</code>, to ensure correct URL generation.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> functionality assumes you have the Octicons library or a similar icon system set up in your theme.</li>\n <li>The include uses responsive design principles with flexbox for layout.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\"\n aria-disabled=\"false\">Collection Menu</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/links.html\"\n aria-disabled=\"false\">Links</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/link-card.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Links | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Links\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta property=\"og:description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Links\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\",\"headline\":\"Links\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Links</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a collection of link cards, typically used for displaying a set of important links on a page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>links.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include doesn’t accept direct parameters. Instead, it relies on page or site-wide variables:</p>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">page.links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n <td>The collection of links to display</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include looks for a <code class=\"language-plaintext highlighter-rouge\">links</code> variable, first on the current page, then falling back to the site configuration.</li>\n <li>It creates a container for the link cards.</li>\n <li>It iterates through each link in the collection and includes a <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> for each one.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">link-card.html</code>: Another include file that defines how each link card is displayed.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the links collection:</p>\n\n<ol>\n <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n <li>Edit the <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include to change how individual links are displayed.</li>\n <li>Adjust the container structure if you need a different layout for the links.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that you have defined a <code class=\"language-plaintext highlighter-rouge\">links</code> collection either in your page front matter or in your site’s configuration.</li>\n <li>The layout uses flexbox for responsive design, allowing the links to adapt to different screen sizes.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\"\n aria-disabled=\"false\">Link Card</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\"\n aria-disabled=\"false\">Paginator Navigation</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/links.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Paginator Navigation | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginator Navigation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta property=\"og:description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Paginator Navigation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\",\"headline\":\"Paginator Navigation\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Paginator Navigation</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Paginator Navigation</strong> include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>You must also have <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"><code class=\"language-plaintext highlighter-rouge\">pagination</code></a> installed.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include can be customized by passing in the following optional parameters:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">paginate_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n <td>Defines the pagination URL pattern (e.g., <code class=\"language-plaintext highlighter-rouge\">\"/blog/page/:num\"</code>).</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">previous_page_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">paginator.previous_page_path</code></td>\n <td>The URL for the previous page in the pagination sequence.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">next_page_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">paginator.next_page_path</code></td>\n <td>The URL for the next page in the pagination sequence.</td>\n </tr>\n </tbody>\n</table>\n\n<p>This allows it to work with <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code></a></p>\n\n<h3 id=\"example-usage-with-parameters\">Example Usage with Parameters</h3>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"na\">paginate_path</span><span class=\"o\">=</span><span class=\"s2\">\"/blog/page/:num\"</span><span class=\"w\"> </span><span class=\"na\">previous_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">previous_page_path</span><span class=\"w\"> </span><span class=\"na\">next_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">next_page_path</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"example-output\">Example Output</h2>\n\n<p>When used in a paginated blog, the output might look like this:</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"paginate-container\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><div</span> <span class=\"na\">role=</span><span class=\"s\">\"navigation\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Pagination\"</span> <span class=\"na\">class=</span><span class=\"s\">\"d-flex d-md-inline-block pagination\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><a</span> <span class=\"na\">class=</span><span class=\"s\">\"previous_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"prev\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">></span>Previous<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"1\"</span><span class=\"nt\">></span>1<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"2\"</span><span class=\"nt\">></span>2<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/3/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"3\"</span><span class=\"nt\">></span>3<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">class=</span><span class=\"s\">\"next_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"next\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">></span>Next<span class=\"nt\"></a></span>\n <span class=\"nt\"></div></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">paginator.total_pages</code> check ensures pagination is only displayed when necessary.</li>\n <li>The first page always links to the base URL instead of <code class=\"language-plaintext highlighter-rouge\">/page/1/</code> for cleaner URLs.</li>\n <li>This include is meant to be used in layouts that support pagination (<code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> or <code class=\"language-plaintext highlighter-rouge\">jekyll-paginate-v2</code>).</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/links.html\"\n aria-disabled=\"false\">Links</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\"\n aria-disabled=\"false\">Post Gallery</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/paginator-nav.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#example-usage-with-parameters\">Example Usage with Parameters</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-output\">Example Output</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Gallery | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Gallery\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta property=\"og:description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Gallery\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\",\"headline\":\"Post Gallery\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Gallery</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td>Required</td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection_permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The permalink structure for individual collection pages</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> with the section slug</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n <td>3</td>\n <td>Number of posts to display per section</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-gallery.html<span class=\"w\">\n </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n </span><span class=\"na\">collection_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">4</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> to create a page that showcases posts from various categories.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Explore Our Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/category/\" class=\"btn\">Category Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Section Display</strong>: For each section in the collection:\n <ul>\n <li>Displays a heading with the section name.</li>\n <li>Shows a “View all” link if there are more posts than the <code class=\"language-plaintext highlighter-rouge\">per_section</code> limit.</li>\n </ul>\n </li>\n <li><strong>Post Layout</strong>:\n <ul>\n <li>The first post in each section is displayed using <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code>.</li>\n <li>Subsequent posts use <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code>.</li>\n <li>Alternates the layout direction between sections for visual variety.</li>\n </ul>\n </li>\n <li><strong>Responsive Design</strong>:\n <ul>\n <li>Uses Primer classes for responsive layout.</li>\n <li>Adjusts layout based on the number of posts in the section.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code></li>\n <li><code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code></li>\n <li>Primer CSS classes</li>\n <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file. The layout uses Bootstrap grid classes, which can be adjusted to fit different design requirements.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code> and <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code> includes are properly set up in your Jekyll site.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">{% cycle '', 'flex-row-reverse' %}</code> tag alternates the layout direction for visual interest.</li>\n <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\"\n aria-disabled=\"false\">Paginator Navigation</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\"\n aria-disabled=\"false\">Post Index</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-gallery.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Index | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Index\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta property=\"og:description\" content=\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Index\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\",\"headline\":\"Post Index\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Index</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h2 id=\"purpose\">Purpose</h2>\n<p>The <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td>Required</td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection_permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The permalink structure for individual collection pages</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> with the section slug</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n <td>6</td>\n <td>Number of posts to display per section</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-index.html<span class=\"w\">\n </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n </span><span class=\"na\">collection_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">8</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> to create a page that showcases posts with various tags.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/tags/\" class=\"btn\">Tag Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Section Display</strong>: For each section in the collection:\n <ul>\n <li>Displays a heading with the section name.</li>\n <li>Shows a “View all” link if there are more posts than the <code class=\"language-plaintext highlighter-rouge\">per_section</code> limit.</li>\n </ul>\n </li>\n <li><strong>Post Layout</strong>:\n <ul>\n <li>All posts within a section are displayed using <code class=\"language-plaintext highlighter-rouge\">post-card.html</code>.</li>\n <li>Posts are arranged in a flex-wrap layout, allowing for responsive design.</li>\n </ul>\n </li>\n <li><strong>Responsive Design</strong>:\n <ul>\n <li>Uses Bootstrap classes for responsive layout.</li>\n <li>The “View all” link is hidden on smaller screens and displayed on larger screens.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></li>\n <li>PRimer CSS classes</li>\n <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file. The layout uses Primer css flex and grid classes, which can be adjusted to fit different design requirements.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> include is properly set up in your Jekyll site.</li>\n <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\"\n aria-disabled=\"false\">Post Gallery</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"\n aria-disabled=\"false\">Post Timeline Card</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-index.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#purpose\">Purpose</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Timeline Card | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta property=\"og:description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Timeline Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\",\"headline\":\"Post Timeline Card\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Timeline Card</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Post Timeline Card</strong> include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line within a template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline-card.html<span class=\"w\"> </span><span class=\"na\">post</span><span class=\"o\">=</span><span class=\"nv\">post</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include requires a <code class=\"language-plaintext highlighter-rouge\">post</code> object to be passed, which contains various metadata fields. Below is a list of supported fields:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Required</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.url</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The permalink to the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.title</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The title of the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.author</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>The author of the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.date</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The date the post was published</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.tags</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>An array of tags associated with the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.excerpt</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A short excerpt from the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.content</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>The full content of the post (used for “Continue Reading”)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.type</code></td>\n <td>❌ No</td>\n <td><code class=\"language-plaintext highlighter-rouge\">comment</code></td>\n <td>The type of post, used for the Octicon badge</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.video</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A URL to an embedded video</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.image</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A URL to a featured image</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">post-timeline</code> include, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Timeline Demo</a></p>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n <li><strong>Octicons</strong>: The GitHub icon set for the badge next to the title.</li>\n <li><strong>CSS Styles</strong>: The <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code> and <code class=\"language-plaintext highlighter-rouge\">.IssueLabel</code> classes should be styled appropriately in your theme.</li>\n <li><strong>Jekyll Collections</strong>: The include expects a post-like object, typically from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To modify how posts are displayed:</p>\n\n<ol>\n <li><strong>Edit the CSS</strong>: Adjust the <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code>, <code class=\"language-plaintext highlighter-rouge\">.title</code>, and <code class=\"language-plaintext highlighter-rouge\">.summary</code> styles.</li>\n <li><strong>Modify the HTML</strong>: Change the markup within <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to match your theme.</li>\n <li><strong>Update the Octicons</strong>: Modify the <code class=\"language-plaintext highlighter-rouge\">post.type</code> value to change the icon displayed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post</code> object is correctly passed when including this file.</li>\n <li>If <code class=\"language-plaintext highlighter-rouge\">post.type</code> is not provided, it defaults to <code class=\"language-plaintext highlighter-rouge\">comment</code> for the Octicon.</li>\n <li>The layout is designed to be responsive and adaptable to different screen sizes.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for post links to ensure compatibility with different site configurations.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\"\n aria-disabled=\"false\">Post Index</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"\n aria-disabled=\"false\">Post Timeline</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-timeline-card.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Timeline | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta property=\"og:description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Timeline\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\",\"headline\":\"Post Timeline\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Timeline</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n <td>None</td>\n <td>The URL for the “View all” link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.pagination</code> or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n <td>Number of posts to display</td>\n </tr>\n </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will show.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include sets up initial variables based on the provided parameters or default values.</li>\n <li>It sorts the collection by date in reverse order (newest first).</li>\n <li>It creates a container for the timeline posts.</li>\n <li>It iterates through the specified collection (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n <li>If there are more posts in the collection than the displayed limit, it adds a “View all” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">collection</code> parameter defaults to <code class=\"language-plaintext highlighter-rouge\">site.posts</code> if not specified.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">limit</code> parameter is optional. If not set, all posts in the collection will be displayed.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is required for the “View all” link to function properly.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the “View all” link, which is a Jekyll filter for generating correct URLs in different site configurations.</li>\n <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"\n aria-disabled=\"false\">Post Timeline Card</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/custom-styles.html\"\n aria-disabled=\"false\">Custom styles</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-timeline.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Custom styles | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta property=\"og:description\" content=\"Site style\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Custom styles</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override any style with styles defined in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code> files. This is to support config based styling which needs jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add css to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"\n aria-disabled=\"false\">Post Timeline</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/github-action.html\"\n aria-disabled=\"false\">Using with a GitH...</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/custom-styles.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Using with a GitHub action | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Using with a GitHub action\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<meta property=\"og:description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"twitter:title\" content=\"Using with a GitHub action\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"You can also use this with GitHub actions. Below is a typical workflow file\",\"headline\":\"Using with a GitHub action\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Using with a GitHub action</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>You can also use this with GitHub actions. Below is a typical workflow file</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Sample workflow for building and deploying a Jekyll site to GitHub Pages</span>\n<span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n\n<span class=\"na\">on</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Runs on pushes targeting the default branch</span>\n <span class=\"na\">push</span><span class=\"pi\">:</span>\n <span class=\"na\">branches</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"s2\">\"</span><span class=\"s\">main\"</span><span class=\"pi\">]</span>\n\n <span class=\"c1\"># Run on every pull request</span>\n <span class=\"na\">pull_request</span><span class=\"pi\">:</span>\n <span class=\"na\">types</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">opened</span><span class=\"pi\">,</span> <span class=\"nv\">reopened</span><span class=\"pi\">,</span> <span class=\"nv\">synchronize</span> <span class=\"pi\">]</span>\n\n <span class=\"c1\"># Allows you to run this workflow manually from the Actions tab</span>\n <span class=\"na\">workflow_dispatch</span><span class=\"pi\">:</span>\n\n <span class=\"na\">schedule</span><span class=\"pi\">:</span>\n <span class=\"c1\"># This will refresh your repositories and other user information every day</span>\n <span class=\"c1\"># * is a special character in YAML so you have to quote this string</span>\n <span class=\"c1\"># Generate from https://crontab.guru/</span>\n <span class=\"c1\"># ┌───────────── minute (0 - 59)</span>\n <span class=\"c1\"># │ ┌───────────── hour (0 - 23)</span>\n <span class=\"c1\"># │ │ ┌───────────── day of the month (1 - 31)</span>\n <span class=\"c1\"># │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)</span>\n <span class=\"c1\"># │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># * * * * *</span>\n <span class=\"pi\">-</span> <span class=\"na\">cron</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*\"</span>\n\n<span class=\"c1\"># Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages</span>\n<span class=\"na\">permissions</span><span class=\"pi\">:</span>\n <span class=\"na\">contents</span><span class=\"pi\">:</span> <span class=\"s\">read</span> <span class=\"c1\"># needed to read your repository</span>\n <span class=\"na\">pages</span><span class=\"pi\">:</span> <span class=\"s\">write</span> <span class=\"c1\"># needed to enable and deploy github pages</span>\n <span class=\"na\">id-token</span><span class=\"pi\">:</span> <span class=\"s\">write</span>\n\n<span class=\"c1\"># Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.</span>\n<span class=\"c1\"># However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.</span>\n<span class=\"na\">concurrency</span><span class=\"pi\">:</span>\n <span class=\"na\">group</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">pages\"</span>\n <span class=\"na\">cancel-in-progress</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n\n<span class=\"na\">jobs</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Build job</span>\n <span class=\"na\">build</span><span class=\"pi\">:</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Checkout</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/checkout@v3</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Ruby</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">ruby/setup-ruby@v1.152.0</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">bundler-cache</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># runs 'bundle install' and caches installed gems automatically</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">pages</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/configure-pages@v3</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">enablement</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Enable github pages if it's not</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Build</span>\n <span class=\"na\">run</span><span class=\"pi\">:</span> <span class=\"s\">bundle exec jekyll build</span>\n <span class=\"na\">env</span><span class=\"pi\">:</span>\n <span class=\"na\">JEKYLL_ENV</span><span class=\"pi\">:</span> <span class=\"s\">production</span>\n <span class=\"na\">JEKYLL_GITHUB_TOKEN</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Upload artifact</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/upload-pages-artifact@v3</span>\n\n <span class=\"c1\"># Deployment job</span>\n <span class=\"na\">deploy</span><span class=\"pi\">:</span>\n <span class=\"na\">if</span><span class=\"pi\">:</span> <span class=\"s\">github.ref == 'refs/heads/main'</span> <span class=\"c1\"># Only deploy from the main branch</span>\n <span class=\"na\">environment</span><span class=\"pi\">:</span>\n <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">github-pages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">needs</span><span class=\"pi\">:</span> <span class=\"s\">build</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Deploy to GitHub Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">deployment</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/deploy-pages@v4</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/custom-styles.html\"\n aria-disabled=\"false\">Custom styles</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/debug.html\"\n aria-disabled=\"false\">Debug</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/github-action.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>{{ jekyll.version }}</pre>\n\n\n<h1 id=\"environment-variables\">Jekyll environment</h1>\n<pre>{{ jekyll.environment }}</pre>\n\n\n<h1 id=\"site-variables\">Site Variables</h1>\n<pre>{{ site | inspect }}</pre>\n\n<h1 id=\"page-variables\">Page Variables</h1>\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n<h1 id=\"paginator-variables\">Paginator Variables</h1>\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n"
],
"files": [],
"relative_directory": "_docs",
"output": true,
"label": "docs",
"sort_by": "order"
},
{
"directory": "/home/runner/work/jekyll-theme-profile/jekyll-theme-profile/demo/_posts",
"docs": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"files": [],
"relative_directory": "_posts",
"output": true,
"label": "posts",
"permalink": "/:categories/:year/:month/:day/:title:output_ext"
}
],
"documents": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Documentation | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Documentation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Documentation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Documentation\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Page flex-column flex-1 min-width-0 py-6\">\n <div class=\"container-xl mx-auto p-responsive\">\n \n \n <h1 class=\"h3-mktg mt-6 mb-4\">Documentation</h1>\n \n <div class=\"markdown-body\">\n \n\n \n \n \n \n \n\n\n\n\n\n\n<div class=\"d-flex flex-wrap gutter\">\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Getting started</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/get-started.html\">Get started</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/configuration.html\">Theme configuration</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/posts.html\">Write a post</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Styles</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\">Appbar style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\">Sidebar style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\">Stacked style</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\">Topbar style</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Layouts</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/home.html\">Home Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\">Profile Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\">Linktree Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\">Docs Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\">Landing layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\">Paginate Timeline Layout</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\">Repositories Layout</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Plugins</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">Pagination</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\">Tagging</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\">Category pages</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Includes</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\">Collection Menu</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\">Link Card</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/links.html\">Links</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\">Paginator Navigation</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\">Post Gallery</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\">Post Index</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\">Post Timeline Card</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Advanced</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/custom-styles.html\">Custom styles</a></li>\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/github-action.html\">Using with a GitHub action</a></li>\n \n </ul>\n </div>\n</div>\n\n \n \n \n \n<div class=\"d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4\">\n <h3 class=\"h3\">Other</h3>\n <div class=\"pt-2 mb-4 text-normal\">\n <ul class=\"list-style-none pl-0\">\n \n <li><a class=\"pt-2\" href=\"/jekyll-theme-profile/docs/debug.html\">Debug</a></li>\n \n </ul>\n </div>\n</div>\n\n \n</div>\n\n </div>\n <div class=\"flex-1\"></div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Get started | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Get started\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\" />\n<meta property=\"og:description\" content=\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"twitter:title\" content=\"Get started\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: appbar, sidebar, stacked, and topbar,.\",\"headline\":\"Get started\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/get-started.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Get started</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This theme is based on GitHub’s primer style. It supports both light and dark modes, and four style options: <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\">appbar</a>, <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\">sidebar</a>, <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\">stacked</a>, and <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\">topbar</a>,.</p>\n\n<p><img src=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" alt=\"jekyll-theme-profile\" /></p>\n\n<h2 id=\"installation\">Installation</h2>\n\n<p>Add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-theme-profile\"</span>\n</code></pre></div></div>\n\n<p>And then execute:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div></div>\n<p>Or install it yourself as:</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem <span class=\"nb\">install </span>jekyll-theme-profile\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>And add this line to your Jekyll site’s <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n<span class=\"na\">repository</span><span class=\"pi\">:</span> <span class=\"s\">PrimerPages/jekyll-theme-profile</span> <span class=\"c1\"># for repository info to be included</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the github profile for the user</span>\n</code></pre></div></div>\n\n<p>Or you can start with a <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/blob/main/demo/_config.yml\">sample config</a> that you can copy and customize.</p>\n\n<h2 id=\"building\">Building</h2>\n\n<p>Build the site and make it available on a local server</p>\n\n<div class=\"language-shell highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">exec </span>jekyll serve\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/index.html\"\n aria-disabled=\"false\">Documentation</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/configuration.html\"\n aria-disabled=\"false\">Theme configuration</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/get-started.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#installation\">Installation</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#building\">Building</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Theme configuration | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Theme configuration\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\" />\n<meta property=\"og:description\" content=\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Theme configuration\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This theme can be set up using the _config.yml file, most settings can be overwritten in pages.\",\"headline\":\"Theme configuration\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/configuration.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Theme configuration</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This theme can be set up using the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file, most settings can be overwritten in pages.</p>\n\n<h2 id=\"theme-settings\">Theme settings</h2>\n\n<h3 id=\"setting-the-theme\">Setting the theme</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">theme</span><span class=\"pi\">:</span> <span class=\"s\">jekyll-theme-profile</span>\n</code></pre></div></div>\n\n<h3 id=\"customizing-the-theme\">Customizing the theme</h3>\n\n<h4 id=\"set-the-style-of-the-website\">Set the style of the website</h4>\n\n<p>Select the default style for your theme by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your config file:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar\"</span>\n</code></pre></div></div>\n\n<p>You can also set the style of a particular page by adding <code class=\"language-plaintext highlighter-rouge\">style</code> to your frontmatter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span> <span class=\"c1\"># One of \"stacked\", \"sidebar\", \"topbar\", \"appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h5 id=\"sidebar\"><a href=\"/jekyll-theme-profile/sidebar.html\">Sidebar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/sidebar-preview.png\" alt=\"Sidebar image\" /></p>\n\n<h5 id=\"stacked\"><a href=\"/jekyll-theme-profile/stacked.html\">Stacked</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/stacked-preview.png\" alt=\"Stacked image\" /></p>\n\n<h5 id=\"topbar\"><a href=\"/jekyll-theme-profile/topbar.html\">Topbar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/topbar-preview.png\" alt=\"Topbar image\" /></p>\n\n<h5 id=\"appbar\"><a href=\"/jekyll-theme-profile/appbar.html\">Appbar</a></h5>\n\n<p><img src=\"/jekyll-theme-profile/media/appbar-preview.png\" alt=\"Appbar image\" />\nChoosing the right style helps define the user experience and visual flow</p>\n\n<h4 id=\"setting-user-avatar\">Setting user avatar</h4>\n\n<p>By default, the theme will use your github avatar. You can, however, set a custom avatar for your site</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/user-image.jpg</span>\n</code></pre></div></div>\n\n<h4 id=\"customizing-light-and-dark-themes\">Customizing light and dark themes</h4>\n\n<p>This setting specifies the style for the light and dark modes of your site. These styles are taken from <a href=\"https://primer.style/css/storybook/?path=/docs/support-theming--docs\">primer css</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># The themes to use for dark and light</span>\n<span class=\"na\">dark_theme</span><span class=\"pi\">:</span> <span class=\"s\">dark_dimmed</span>\n<span class=\"na\">light_theme</span><span class=\"pi\">:</span> <span class=\"s\">light</span>\n</code></pre></div></div>\n\n<h4 id=\"set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</h4>\n\n<p>You can even change the background by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for both light and dark styles</span>\n</code></pre></div></div>\n\n<p>or set custom overlays for the light and dark themes.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">light</span><span class=\"pi\">:</span> <span class=\"c1\"># custom overlay for light and dark styles</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(255, 255, 255, 0.5)</span>\n <span class=\"na\">dark</span><span class=\"pi\">:</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"set-custom-header-colors\">Set custom header colors</h4>\n\n<p>You can change the header color by adding the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file or page frontmatter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">color</code> The main background color of the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">text</code> The color of text elements within the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">accent</code> Controls the color of accent elements such as links</li>\n <li><code class=\"language-plaintext highlighter-rouge\">image</code> Sets an image in the background of the header</li>\n <li><code class=\"language-plaintext highlighter-rouge\">overlay</code> Sets the overlay on top of an image for better visibility of links</li>\n</ul>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Example page</a></p>\n\n<h4 id=\"additional-theme-features\">Additional theme features</h4>\n\n<p>These additional features add information to your site from your github user.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the information for the source of this project</span>\n<span class=\"na\">user_metadata</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show the metadata associated with the user</span>\n<span class=\"na\">profile_link</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Show a link to the github profile for the user</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">repo_info</code> will show the repository information in the header section</li>\n <li><code class=\"language-plaintext highlighter-rouge\">user_metadata</code> will show metadata associated with your user under your masthead</li>\n <li><code class=\"language-plaintext highlighter-rouge\">profile_link</code> will show a link to your profile</li>\n</ul>\n\n<h2 id=\"social-media-and-seo-optional\">Social media and SEO (optional)</h2>\n\n<h3 id=\"setting-the-social-media-preview-image\">Setting the social media preview image</h3>\n\n<p>You can set the social media image for your site with the setting</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/screenshot.jpg</span>\n</code></pre></div></div>\n\n<p>This works on both yaml frontmatter for a page and in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file. Page settings will override site settings.</p>\n\n<p>Set the default for posts through the default settings in the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">defaults</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">posts\"</span>\n <span class=\"na\">values</span><span class=\"pi\">:</span>\n <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">post\"</span>\n <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/blog/:year/:month/:day/:title.html</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h3 id=\"adding-your-socials\">Adding your socials</h3>\n\n<p>Utilize the <code class=\"language-plaintext highlighter-rouge\">social_media</code> section to add links to your various social media profiles. For each platform simply provide your username or user ID to have the corresponding icon and link appear on your profile.</p>\n\n<p><img src=\"/jekyll-theme-profile/media/social-media.png\" alt=\"Social Media\" class=\"border\" /></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">social_media</span><span class=\"pi\">:</span>\n <span class=\"na\">behance</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">dribbble</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">docker</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">facebook</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">github</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">hackerrank</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">instagram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">keybase</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">linkedin</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">mail</span><span class=\"pi\">:</span> <span class=\"s\">email@address</span>\n <span class=\"na\">mastodon</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">medium</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">stackoverflow</span><span class=\"pi\">:</span> <span class=\"s\">your_user_id</span>\n <span class=\"na\">telegram</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">threads</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">tiktok</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">twitter</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">unsplash</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">vk</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">vscode</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">youtube</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n <span class=\"na\">x</span><span class=\"pi\">:</span> <span class=\"s\">your_username</span>\n</code></pre></div></div>\n\n<p>You can also set the icon color. If you don’t set an icon color, the original icon colors will be used.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">icon_color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#959da5\"</span>\n</code></pre></div></div>\n\n<h2 id=\"navigation-links-optional\">Navigation links (optional)</h2>\n\n<p>You can add navigation links that will show up in your header bar and in navigation menus.</p>\n\n<p>These will be visible in all pages, and are the main elements in the <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\">landing layout</a>.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Navigation links</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Categories</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name of the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">url</code> The url of the link</li>\n</ul>\n\n<h2 id=\"links-optional\">Links (optional)</h2>\n\n<p>In the <code class=\"language-plaintext highlighter-rouge\">links</code> section, you can add links to showcase various pages on the web or your website.</p>\n\n<p>These will show in <a href=\"/jekyll-theme-profile/docs/layouts/home.html\">home</a>, <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a>, and <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\">linktree</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># List of links for link cards</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">All blog posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/blog</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/blog-post-icon.png</span> <span class=\"c1\"># optional</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Category</span>\n <span class=\"na\">description</span><span class=\"pi\">:</span> <span class=\"s\">Browse all categories in posts</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/category/</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">name</code> The name/title to show for the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">description</code> (optional) Additional text to show for the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">url</code> (optional) The URL of the link</li>\n <li><code class=\"language-plaintext highlighter-rouge\">thumbnail</code> (optional) The thumbnail image to show</li>\n <li><code class=\"language-plaintext highlighter-rouge\">octicon</code> (optional) Instead of a thumbnail, use an octicon icon</li>\n</ul>\n\n<h2 id=\"repositories-optional\">Repositories (optional)</h2>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">repositories</code> section allows you to display your GitHub repositories on your page. You can sort them by stars or latest pushes, set a limit to the number of repositories displayed, and exclude archived, forked, or specific repositories from the list</p>\n\n<p>These show in the <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a> and <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\">repositories</a> layouts.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Repositories to show on home page</span>\n<span class=\"na\">repositories</span><span class=\"pi\">:</span>\n <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">stars</span> <span class=\"c1\"># pushed or stars</span>\n <span class=\"na\">limit</span><span class=\"pi\">:</span> <span class=\"m\">24</span>\n <span class=\"na\">exclude</span><span class=\"pi\">:</span>\n <span class=\"na\">archived</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">forks</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">repositories</span><span class=\"pi\">:</span>\n <span class=\"c1\"># - list of repositories to exclude</span>\n</code></pre></div></div>\n\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">sort_by</code> What to sort repositories by, either latest pushed or number of stars</li>\n <li><code class=\"language-plaintext highlighter-rouge\">limit</code> max number of repositories to show</li>\n <li><code class=\"language-plaintext highlighter-rouge\">exclude</code> Repositories to exclude from your site</li>\n</ul>\n\n<h2 id=\"post-settings\">Post settings</h2>\n\n<h3 id=\"related\">Related</h3>\n\n<p>Each post can show related posts below it. Choose either <code class=\"language-plaintext highlighter-rouge\">tags</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> or <code class=\"language-plaintext highlighter-rouge\">random</code> or a combination.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/get-started.html\"\n aria-disabled=\"false\">Get started</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/posts.html\"\n aria-disabled=\"false\">Write a post</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/configuration.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#theme-settings\">Theme settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-theme\">Setting the theme</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#customizing-the-theme\">Customizing the theme</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-the-style-of-the-website\">Set the style of the website</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#sidebar\">Sidebar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#stacked\">Stacked</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#topbar\">Topbar</a></li>\n<li class=\"toc-entry toc-h5\"><a href=\"#appbar\">Appbar</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h4\"><a href=\"#setting-user-avatar\">Setting user avatar</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#customizing-light-and-dark-themes\">Customizing light and dark themes</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-a-custom-background-and-image-overlay\">Set a custom background and image overlay</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#set-custom-header-colors\">Set custom header colors</a></li>\n<li class=\"toc-entry toc-h4\"><a href=\"#additional-theme-features\">Additional theme features</a></li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#social-media-and-seo-optional\">Social media and SEO (optional)</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-social-media-preview-image\">Setting the social media preview image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#adding-your-socials\">Adding your socials</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#navigation-links-optional\">Navigation links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#links-optional\">Links (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#repositories-optional\">Repositories (optional)</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#post-settings\">Post settings</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#related\">Related</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Write a post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Write a post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\" />\n<meta property=\"og:description\" content=\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Write a post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.\",\"headline\":\"Write a post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/posts.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Write a post</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<h2 id=\"front-matter\">Front matter</h2>\n\n<p>All blog posts must begin with front matter which is typically used to set a layout or other meta data. For a simple example, this can just be empty:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">post</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">welcome</span><span class=\"nv\"> </span><span class=\"s\">to</span><span class=\"nv\"> </span><span class=\"s\">Jekyll!\"</span>\n<span class=\"nn\">---</span>\n\n<span class=\"gh\"># Welcome</span>\n\n<span class=\"gs\">**Hello world**</span>, this is my first Jekyll blog post.\n\nI hope you like it!\n</code></pre></div></div>\n\n<p>Here’s a list of variables for this theme</p>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Specifies the layout file to use. Use the layout file name without the file extension. <br /><br /> Go to <a href=\"/jekyll-theme-profile/docs/index.html\">docs</a> to learn about options</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">permalink</code></td>\n <td>If you need or processed blog post URLs to be something other than the site-wide default (<code class=\"language-plaintext highlighter-rouge\">/year/month/day/title.html</code>), then you can set this variable and it will be used as the final URL</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">published</code></td>\n <td>Set to false if you don’t want a specific post to show up when the site is generated</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">date</code></td>\n <td>A date here overrides the date from the name of the post. This can be used to ensure correct sorting of posts. A date is specified in the format <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD HH:MM:SS +/-TTTT</code>: hours, minutes,seconds, and timezone offset are optional</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code></td>\n <td>Instead of placing posts inside of folders, you can specify one or more categories that the post belongs to. When the site is generated the post will act as though it had been set with these categories normally. Categories (plural key) can be specified as a YAML list or a space-separated string</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">tags</code></td>\n <td>Similar to categories, one or multiple tags can be added to a post. Also like categories, tags can be specified as a YAML list or a space-separated string</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n <td>A longer description used for hte description meta tag</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">image</code></td>\n <td>URL to an image associated with the post for SEO</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">author</code></td>\n <td>Post-specific author information</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">locale</code></td>\n <td>Post-specific locale information</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code></td>\n <td>You can access a snippet of a posts’ content by using <code class=\"language-plaintext highlighter-rouge\">excerpt</code> variable on a post. By default this is the first paragraph of content in the post, but can be customized by using <code class=\"language-plaintext highlighter-rouge\">excerpt_separator</code>. <br /><br />Example <code class=\"language-plaintext highlighter-rouge\">excerpt_separator: <!--more--></code></td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"including-images-and-resources\">Including images and resources</h2>\n\n<p>At some point, you’ll want to include images, downloads, or other digital assets along with your text content. One common solution is to create a folder in the root of the project directory called something like <code class=\"language-plaintext highlighter-rouge\">assets</code>, into which any images, files or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. The best way to do this depends on the way your site’s (sub)domain and path are configured, but here are some simple examples in Markdown:</p>\n\n<p>Including an image asset in a post:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... which is shown in the screenshot below:\n<span class=\"p\">![</span><span class=\"nv\">My helpful screenshot</span><span class=\"p\">](</span><span class=\"sx\">/assets/screenshot.jpg</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Linking to a PDF for readers to download:</p>\n\n<div class=\"language-markdown highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>... you can <span class=\"p\">[</span><span class=\"nv\">get the PDF</span><span class=\"p\">](</span><span class=\"sx\">/assets/mydoc.pdf</span><span class=\"p\">)</span> directly.\n</code></pre></div></div>\n\n<h2 id=\"tags-and-categories\">Tags and Categories</h2>\n\n<p>Jekyll has first class support for <em>tags</em> and <em>categories</em> in blog posts.</p>\n\n<h3 id=\"tags\">Tags</h3>\n\n<p>Tags for a post are defined in the post’s front matter using either the key <code class=\"language-plaintext highlighter-rouge\">tag</code> for a single entry or <code class=\"language-plaintext highlighter-rouge\">tags</code> for multiple entries.\nSince Jekyll expects multiple items mapped to the key <code class=\"language-plaintext highlighter-rouge\">tags</code>, it will automatically split a string entry if it contains whitespace. For example, while front matter <code class=\"language-plaintext highlighter-rouge\">tag: classic hollywood</code> will be processed into a singular entity <code class=\"language-plaintext highlighter-rouge\">\"classic hollywood\"</code>, front matter <code class=\"language-plaintext highlighter-rouge\">tags: classic hollywood</code> will be processed into an array of entries <code class=\"language-plaintext highlighter-rouge\">[\"classic\", \"hollywood\"]</code>.</p>\n\n<p>Irrespective of the front matter key chosen, Jekyll stores the metadata mapped to the plural key which is exposed to Liquid templates.</p>\n\n<p>By default the theme will show posts related by tags or categories with the setting:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># related</span>\n<span class=\"na\">related_by</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">tags</span><span class=\"nv\"> </span><span class=\"s\">or</span><span class=\"nv\"> </span><span class=\"s\">categories\"</span>\n</code></pre></div></div>\n\n<p>These show up as “related posts” underneath a post.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\">tagging</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> plugin.</p>\n\n<h3 id=\"categories\">Categories</h3>\n\n<p>Categories of a post work similar to the tags above:</p>\n\n<ul>\n <li>They can be defined via the front matter using keys <code class=\"language-plaintext highlighter-rouge\">category</code> or <code class=\"language-plaintext highlighter-rouge\">categories</code> (that follow the same logic as for tags)</li>\n <li>All categories registered in the site are exposed to Liquid templates via <code class=\"language-plaintext highlighter-rouge\">site.categories</code> which can be iterated over (similar to the loop for tags above.)</li>\n</ul>\n\n<p><em>The similarity between categories and tags however, ends there.</em></p>\n\n<p>Unlike tags, categories for posts can also be defined by a post’s file path. Any directory above _posts will be read-in as a category. For example, if a post is at path <code class=\"language-plaintext highlighter-rouge\">movies/horror/_posts/2019-05-21-bride-of-chucky.markdown</code>, then <code class=\"language-plaintext highlighter-rouge\">movies</code> and <code class=\"language-plaintext highlighter-rouge\">horror</code> are automatically registered as categories for that post.</p>\n\n<p>When the post also has front matter defining categories, they just get added to the existing list if not present already.</p>\n\n<p>The hallmark difference between categories and tags is that categories of a post may be incorporated into the generated URL for the post, while tags cannot be.</p>\n\n<p>Therefore, depending on whether front matter has <code class=\"language-plaintext highlighter-rouge\">category: classic hollywood</code>, or <code class=\"language-plaintext highlighter-rouge\">categories: classic hollywood</code>, the example post above would have the URL as either <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic%20hollywood/2019/05/21/bride-of-chucky.html</code> or <code class=\"language-plaintext highlighter-rouge\">movies/horror/classic/hollywood/2019/05/21/bride-of-chucky.html</code> respectively.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\">category pages</a> for additional features and settings using the <code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> plugin.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/configuration.html\"\n aria-disabled=\"false\">Theme configuration</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\"\n aria-disabled=\"false\">Appbar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/posts.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#front-matter\">Front matter</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#including-images-and-resources\">Including images and resources</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tags-and-categories\">Tags and Categories</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#tags\">Tags</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#categories\">Categories</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Appbar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Appbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/appbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/appbar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Appbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Appbar style\",\"image\":\"https://primerpages.github.io/media/appbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Appbar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/appbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>appbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A fixed top navigation bar</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">appbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>appbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">appbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an appbar as a <a href=\"/jekyll-theme-profile/appbar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/appbar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/appbar-tablet.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/posts.html\"\n aria-disabled=\"false\">Write a post</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\"\n aria-disabled=\"false\">Sidebar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/appbar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Sidebar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Sidebar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/sidebar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/sidebar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Sidebar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Sidebar style\",\"image\":\"https://primerpages.github.io/media/sidebar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Sidebar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/sidebar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>sidebar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A collapsible side navigation bar that collapses</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">sidebar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>sidebar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an sidebar as a <a href=\"/jekyll-theme-profile/sidebar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/sidebar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/sidebar-laptop.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/appbar.html\"\n aria-disabled=\"false\">Appbar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\"\n aria-disabled=\"false\">Stacked style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/sidebar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Stacked style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Stacked style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/stacked-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/stacked-preview.png\" />\n<meta property=\"twitter:title\" content=\"Stacked style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Stacked style\",\"image\":\"https://primerpages.github.io/media/stacked-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Stacked style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/stacked-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>stacked</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A top header with image</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">stacked</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>stacked</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">stacked</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an stacked as a <a href=\"/jekyll-theme-profile/stacked.html\">home</a>, <a href=\"/jekyll-theme-profile/page/stacked.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/stacked-laptop.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/sidebar.html\"\n aria-disabled=\"false\">Sidebar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\"\n aria-disabled=\"false\">Topbar style</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/stacked.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Topbar style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Topbar style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Theme built with jekyll-theme-profile\" />\n<meta property=\"og:description\" content=\"Theme built with jekyll-theme-profile\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/media/topbar-preview.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/media/topbar-preview.png\" />\n<meta property=\"twitter:title\" content=\"Topbar style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Theme built with jekyll-theme-profile\",\"headline\":\"Topbar style\",\"image\":\"https://primerpages.github.io/media/topbar-preview.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/styles/topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n styles\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Topbar style</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><img src=\"/jekyll-theme-profile/media/topbar-preview.png\" alt=\"\" /></p>\n\n<p>The <strong>topbar</strong> style modifies the theme’s header section to provide a clean, GitHub-like navigation experience. It features</p>\n\n<ul>\n <li>A fixed top navigation bar</li>\n <li>Consistent spacing and typography matching GitHub’s Primer style</li>\n <li>Dark and light mode compatibility</li>\n</ul>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>You can use this style as a default for your website, or set the style of an individual page.</p>\n\n<h3 id=\"setting-as-the-default-style\">Setting as the default style</h3>\n\n<p>Modify the <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file to set <code class=\"language-plaintext highlighter-rouge\">topbar</code> as the theme’s default style</p>\n\n<div class=\"language-yml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n</code></pre></div></div>\n\n<h3 id=\"setting-the-style-of-a-page\">Setting the style of a page</h3>\n\n<p>To apply the <strong>topbar</strong> style to a specific page, add the following front matter in your <code class=\"language-plaintext highlighter-rouge\">.md</code> file</p>\n\n<div class=\"language-md highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">topbar</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"example-usage\">Example usage</h2>\n\n<p>See examples of an topbar as a <a href=\"/jekyll-theme-profile/appbar.html\">home</a>, <a href=\"/jekyll-theme-profile/page/appbar.html\">page</a> and <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">post</a></p>\n\n<p><img src=\"/jekyll-theme-profile/media/topbar-tablet.png\" alt=\"\" /></p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/stacked.html\"\n aria-disabled=\"false\">Stacked style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/home.html\"\n aria-disabled=\"false\">Home Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/styles/topbar.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-as-the-default-style\">Setting as the default style</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#setting-the-style-of-a-page\">Setting the style of a page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example usage</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Home Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Home Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The home layout is the same thing as the profile layout.\" />\n<meta property=\"og:description\" content=\"The home layout is the same thing as the profile layout.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Home Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The home layout is the same thing as the profile layout.\",\"headline\":\"Home Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/home.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Home Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>home</strong> layout is the same thing as the <code class=\"language-plaintext highlighter-rouge\">profile</code> layout.</p>\n\n<p>See <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\">profile</a> for details and options.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/styles/topbar.html\"\n aria-disabled=\"false\">Topbar style</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\"\n aria-disabled=\"false\">Profile Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/home.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Profile Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Profile Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\" />\n<meta property=\"og:description\" content=\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Profile Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The profile layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.\",\"headline\":\"Profile Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/profile.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Profile Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>profile</strong> layout is designed for creating a personal or organizational profile page in your Jekyll site. It provides a structured format to showcase a user’s profile image, bio, social links, blog posts, and repositories.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Profile layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Profile layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">profile</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">default</code></td>\n <td>Layout style (<code class=\"language-plaintext highlighter-rouge\">default</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, <code class=\"language-plaintext highlighter-rouge\">stacked</code>)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">user_image</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.user_image</code> or <code class=\"language-plaintext highlighter-rouge\">site.github.owner.avatar_url</code></td>\n <td>Custom user profile image</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n <td>An array of social/profile links</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n <td>Collection of posts to display in the blog section</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n <td>Number of posts to display</td>\n </tr>\n </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>The text to display for the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>The URL the link should point to</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">icon</code></td>\n <td>A custom icon for the link (optional)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a profile section with an image and name.</li>\n <li>Includes social/profile links if provided.</li>\n <li>Shows a timeline of blog posts from the specified collection.</li>\n <li>Optionally displays repositories if <code class=\"language-plaintext highlighter-rouge\">site.repositories</code> is enabled.</li>\n <li>Supports different layout styles (<code class=\"language-plaintext highlighter-rouge\">default</code>, <code class=\"language-plaintext highlighter-rouge\">sidebar</code>, <code class=\"language-plaintext highlighter-rouge\">stacked</code>).</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Profile page with user information and links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">profile</span>\n<span class=\"na\">user_image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/custom-user.jpg</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">sidebar</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">GitHub</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/username</span>\n <span class=\"na\">icon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Twitter</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://twitter.com/username</span>\n <span class=\"na\">icon</span><span class=\"pi\">:</span> <span class=\"s\">twitter</span>\n<span class=\"na\">collection</span><span class=\"pi\">:</span> <span class=\"s\">site.posts</span>\n<span class=\"na\">posts_limit</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/profile.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure all image URLs are correct and accessible.</li>\n <li>Icons require the correct library to be included in your theme.</li>\n <li>The layout is responsive and should work well across different screen sizes.</li>\n <li>Custom styling can be added using additional CSS overrides in your theme.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for rendering the profile header.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for displaying social links.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> include for listing blog posts.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include for rendering repositories.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Profile layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/home.html\"\n aria-disabled=\"false\">Home Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\"\n aria-disabled=\"false\">Linktree Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/profile.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Linktree Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Linktree Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<meta property=\"og:description\" content=\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Linktree Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The linktree layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.\",\"headline\":\"Linktree Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/linktree.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Linktree Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>linktree</strong> layout is a versatile template for creating a page that displays a collection of important links, similar to the popular Linktree service. This layout is highly customizable and can be used to create both simple and complex link pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Linktree layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Linktree layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">linktree</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">[]</code></td>\n <td>An array of link objects to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">background_image</code></td>\n <td>None</td>\n <td>URL of a background image for the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td>None</td>\n <td>Title to display at the top of the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">css_style</code></td>\n <td>None</td>\n <td>Custom CSS to apply to the page</td>\n </tr>\n </tbody>\n</table>\n\n<p>Each link object in the <code class=\"language-plaintext highlighter-rouge\">links</code> array can have the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>The text to display for the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>The URL the link should point to</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n <td>URL of an image to use as the link’s icon (optional)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n <td>Name of an Octicon to use as the link’s icon (optional)</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The layout creates a responsive grid of link cards.</li>\n <li>Each link is displayed as a card with an optional thumbnail or icon.</li>\n <li>The layout includes a theme toggle button for light/dark mode.</li>\n <li>If specified, it displays a title and applies custom CSS.</li>\n</ol>\n\n<h2 id=\"usage-1\">Usage</h2>\n\n<p>This example shows a basic Linktree page with various links:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">My website</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://avatars.githubusercontent.com/u/6098197?v=4</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Github Dashboard</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://dashboard.althack.dev</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/athackst/dashboard/raw/main/assets/dashboard.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Github Profile</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://github.com/athackst</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">mark-github</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Dockerhub</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://hub.docker.com/u/althack</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://img.icons8.com/?size=100&id=cdYUlRaag9G9&format=png&color=000000</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">VSCode Extensions</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://marketplace.visualstudio.com/publishers/althack</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://img.icons8.com/?size=100&id=0OQR1FYCuA9f&format=png&color=000000</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Ruby Gems</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://rubygems.org/profiles/althack</span>\n <span class=\"na\">octicon</span><span class=\"pi\">:</span> <span class=\"s\">ruby</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Python packages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">https://pypi.org/user/athackst/</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">https://pypi.org/static/images/logo-small.8998e9d1.svg</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/linktree.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n <li><strong>Background Image</strong>: Add a <code class=\"language-plaintext highlighter-rouge\">background_image</code> parameter to set a custom background.</li>\n <li><strong>Custom CSS</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">css_style</code> parameter to add custom CSS directly in the front matter.</li>\n <li><strong>Link Icons</strong>: Use either <code class=\"language-plaintext highlighter-rouge\">thumbnail</code> for custom images or <code class=\"language-plaintext highlighter-rouge\">octicon</code> for GitHub’s Octicons.</li>\n <li><strong>Layout Variations</strong>: The layout supports different styles like topbar, appbar, sidebar, and stacked. Use the appropriate URL to see these variations.</li>\n</ol>\n\n<p>The following example demonstrates how to customize the Linktree layout with a background image and custom CSS:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">linktree</span>\n<span class=\"na\">background_image</span><span class=\"pi\">:</span> <span class=\"s\">https://www.allisonthackston.com/assets/img/cover-1920.jpg</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Linktree</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">.octicon {</span>\n <span class=\"s\">fill: black;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">a {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">a:hover {</span>\n <span class=\"s\">text-decoration: none;</span>\n <span class=\"s\">color: var(--color-fg-default);</span>\n <span class=\"s\">}</span>\n<span class=\"na\">links</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with topbar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/topbar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/topbar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with appbar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/appbar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/appbar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with sidebar</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/sidebar</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/sidebar-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example page with header stacked</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/page/stacked</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/stacked-icon.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example custom background</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/background</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/icon-bg.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Linktree page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/linktree</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/links.png</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Profile page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/profile</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/user-image.jpg</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Example Repositories page</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">/repositories</span>\n <span class=\"na\">thumbnail</span><span class=\"pi\">:</span> <span class=\"s\">/media/repositories.png</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/linktree-custom.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure all image URLs are correct and accessible.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> property requires the Octicons library to be included in your theme.</li>\n <li>Custom CSS can override the theme’s default styles, so use it carefully.</li>\n <li>The layout is responsive and should work well on various screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li>The <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include for rendering individual links.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for the theme toggle functionality.</li>\n <li>Octicons for icon display.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Linktree layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/profile.html\"\n aria-disabled=\"false\">Profile Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\"\n aria-disabled=\"false\">Docs Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/linktree.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage-1\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Docs Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Docs Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<meta property=\"og:description\" content=\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Docs Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The docs layout is ideal for documentation pages and follows the document style on GitHub Docs.\",\"headline\":\"Docs Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/docs.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Docs Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>docs</strong> layout is ideal for documentation pages and follows the document style on <a href=\"https://docs.github.com\">GitHub Docs</a>.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Docs layout in your Jekyll site, create a new file in your <code class=\"language-plaintext highlighter-rouge\">_docs</code> collection with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Your Documentation Title</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">docs</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"configuration\">Configuration</h2>\n\n<p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">collections</span><span class=\"pi\">:</span>\n <span class=\"na\">docs</span><span class=\"pi\">:</span>\n <span class=\"na\">output</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n <span class=\"na\">sort_by</span><span class=\"pi\">:</span> <span class=\"s\">order</span>\n<span class=\"na\">defaults</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">scope</span><span class=\"pi\">:</span>\n <span class=\"na\">path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">\"</span> <span class=\"c1\"># an empty string here means all files in the project</span>\n <span class=\"na\">type</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n <span class=\"na\">values</span><span class=\"pi\">:</span>\n <span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">docs\"</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/assets/img/default.png</span> <span class=\"c1\"># The default image used for social and posts.</span>\n <span class=\"na\">permalink</span><span class=\"pi\">:</span> <span class=\"s\">/docs/:path</span>\n <span class=\"na\">edit_url</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">https://github.com/{user}/{repo}/edit/{branch}\"</span> <span class=\"c1\"># replace with your user, repo, and branch for edit links</span>\n <span class=\"na\">toc</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n</code></pre></div></div>\n\n<h2 id=\"features\">Features</h2>\n\n<ul>\n <li>Automatically generates a table of contents (<code class=\"language-plaintext highlighter-rouge\">toc: true</code>)</li>\n <li>Uses a default image for social sharing</li>\n <li>Sorts documentation pages by the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter</li>\n <li>Adds a “Edit this page” link if <code class=\"language-plaintext highlighter-rouge\">edit_url</code> is set</li>\n</ul>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/docs/index.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure your documentation files are placed in the <code class=\"language-plaintext highlighter-rouge\">_docs</code> folder</li>\n <li>Use the <code class=\"language-plaintext highlighter-rouge\">order</code> front matter to control the sorting of your documentation pages</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">toc</code> option automatically generates a table of contents for each page</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/linktree.html\"\n aria-disabled=\"false\">Linktree Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\"\n aria-disabled=\"false\">Landing layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/docs.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#configuration\">Configuration</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#features\">Features</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Landing layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Landing layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<meta property=\"og:description\" content=\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Landing layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The landing layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.\",\"headline\":\"Landing layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/landing.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Landing layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>landing</strong> layout is designed for creating a sleek, minimal homepage or landing page for your Jekyll site. It provides a structured format for showcasing a masthead, repository information, navigation links, and social media profiles.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Landing layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Landing layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">landing</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">style</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">none</code></td>\n <td>Layout style customization (optional)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">repo_info</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.repo_info</code></td>\n <td>Displays repository information if enabled</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">nav</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.nav</code></td>\n <td>Displays site navigation if enabled</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">social_media</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.social_media</code></td>\n <td>Displays social media links if provided</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a masthead for branding and introduction.</li>\n <li>Optionally includes a repository information card.</li>\n <li>Shows navigation links if configured.</li>\n <li>Includes a section for social media links.</li>\n <li>Provides a customizable structure for content placement.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Landing page setup:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">landing</span>\n<span class=\"na\">style</span><span class=\"pi\">:</span> <span class=\"s\">none</span>\n<span class=\"na\">repo_info</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">nav</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"na\">social_media</span><span class=\"pi\">:</span> <span class=\"kc\">true</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/landing.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure <code class=\"language-plaintext highlighter-rouge\">repo_info</code>, <code class=\"language-plaintext highlighter-rouge\">nav</code>, and <code class=\"language-plaintext highlighter-rouge\">social_media</code> are configured in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> if needed.</li>\n <li>Custom styles can be applied by modifying the theme’s CSS.</li>\n <li>The layout is responsive and should work well on all screen sizes.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This layout may depend on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">masthead.html</code> include for branding.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">toggle.html</code> include for theme switching.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">mini-repo-info-card.html</code> include for repository info.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">nav.html</code> include for navigation.</li>\n <li><code class=\"language-plaintext highlighter-rouge\">social.html</code> include for social media links.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Landing layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/docs.html\"\n aria-disabled=\"false\">Docs Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"\n aria-disabled=\"false\">Paginate Timeline...</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/landing.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Paginate Timeline Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginate Timeline Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<meta property=\"og:description\" content=\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Paginate Timeline Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The paginate_timeline layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting post-timeline.html include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.\",\"headline\":\"Paginate Timeline Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Paginate Timeline Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>paginate_timeline</strong> layout is designed to display blog posts (or other collections) in a paginated timeline format. It uses Jekyll’s built-in pagination and a supporting <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> include to list items. This layout is particularly useful for blogs with many posts, where readers can navigate page by page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Paginate Timeline layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<p>Jekyll’s pagination feature must be enabled in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>. For example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page:num\"</span>\n</code></pre></div></div>\n\n<p>This config will split your post list into chunks of five items per page.</p>\n\n<p>The Paginate Layout must be specified in the index of the start of this path. For the example above, it should be in <code class=\"language-plaintext highlighter-rouge\">/blog/index.html</code>.</p>\n\n<blockquote>\n <p>[!NOTE]\nThe path should be <em>absolute</em> and start with a <code class=\"language-plaintext highlighter-rouge\">/</code>, otherwise the index links will not work correctly.</p>\n</blockquote>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Paginate Timeline layout supports the following:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td>None</td>\n <td>The heading to display on the timeline page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n <td>None</td>\n <td>You can write page content below the front matter. It will appear above the timeline.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">pagination.permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.pagination.permalink</code> or <code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n <td>Path structure for pagination pages (e.g., <code class=\"language-plaintext highlighter-rouge\">page:num</code>)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">posts_limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate</code></td>\n <td>Number of posts to display per page, if desired. Can also be overridden in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Page Content</strong>: The layout renders any Markdown or HTML in <code class=\"language-plaintext highlighter-rouge\">{{ content }}</code> before displaying the timeline.</li>\n <li><strong>Post Timeline</strong>: It includes the <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> partial, which loops through the specified collection (typically <code class=\"language-plaintext highlighter-rouge\">paginator.posts</code>) and renders each post.</li>\n <li><strong>Pagination Links</strong>: At the bottom of the page, you’ll find controls for navigating to previous and next pages, as well as direct links to individual pages.</li>\n <li><strong>Custom Index Path</strong>: The layout attempts to resolve <code class=\"language-plaintext highlighter-rouge\">paginator.first_page_path</code> or a fallback URL for linking back to the main blog index.</li>\n <li><strong>Site-Level Configuration</strong>: The layout relies on your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> settings (<code class=\"language-plaintext highlighter-rouge\">paginate</code>, <code class=\"language-plaintext highlighter-rouge\">paginate_path</code>, etc.) to define pagination behavior.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>Below is a minimal usage example:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">paginate_timeline</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Paginated Blog</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my blog! Below is a list of the latest posts. Use the pagination buttons to navigate.</span>\n</code></pre></div></div>\n\n<p><code class=\"language-plaintext highlighter-rouge\">_config.yml</code></p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">blog/page:num\"</span>\n</code></pre></div></div>\n\n<p>With this configuration:</p>\n<ol>\n <li>Each page shows 5 posts.</li>\n <li>Pagination paths follow the pattern <code class=\"language-plaintext highlighter-rouge\">/blog/page1</code>, <code class=\"language-plaintext highlighter-rouge\">/blog/page2</code>, etc.</li>\n</ol>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li><strong>Jekyll Pagination Plugin</strong>: Ensure you have the <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">jekyll-paginate</a> plugin configured (depending on your Jekyll version).</li>\n <li><strong>Page vs. Post</strong>: Paginated content is typically drawn from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>, but you can specify a different collection if desired.</li>\n <li><strong>Responsive</strong>: The layout is designed to adapt to mobile, tablet, and desktop screens.</li>\n</ul>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<ol>\n <li><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code></a> (included): Used to render the collection of posts.</li>\n <li><a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code></a> (included): Used to render each post.</li>\n <li><a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\">pagination</a>: Make sure your Jekyll site is set up for pagination, or the layout’s pagination features will not work.</li>\n</ol>\n\n<p>Ensure these dependencies are properly set up in your Jekyll theme for the Paginate Timeline layout to function correctly.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/landing.html\"\n aria-disabled=\"false\">Landing layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\"\n aria-disabled=\"false\">Repositories Layout</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/paginate_timeline.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Repositories Layout | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Repositories Layout\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<meta property=\"og:description\" content=\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Repositories Layout\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The repositories layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.\",\"headline\":\"Repositories Layout\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/layouts/repositories.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n layouts\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Repositories Layout</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>repositories</strong> layout is designed for displaying a list of repositories on your Jekyll site. It provides a structured format to showcase repositories dynamically using predefined includes.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use the Repositories layout in your Jekyll site, create a new file with the following front matter:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>The Repositories layout accepts several parameters in the front matter:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">layout</code></td>\n <td>Required</td>\n <td>Must be set to <code class=\"language-plaintext highlighter-rouge\">repositories</code></td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">title</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">Repositories</code></td>\n <td>The title displayed on the page</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">content</code></td>\n <td>Optional</td>\n <td>Additional text or descriptions displayed before the repositories</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>Displays a title for the repositories page.</li>\n <li>Optionally includes descriptive content before the repository list.</li>\n <li>Dynamically loads and displays repositories using the <code class=\"language-plaintext highlighter-rouge\">repositories.html</code> include.</li>\n <li>Supports Jekyll’s standard content management for additional customization.</li>\n</ol>\n\n<h2 id=\"example-usage\">Example Usage</h2>\n\n<p>This example shows a basic Repositories page with a custom title and description:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">repositories</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">My Projects</span>\n<span class=\"nn\">---</span>\n<span class=\"s\">Welcome to my open-source projects repository page. Here you can find all my latest projects.</span>\n</code></pre></div></div>\n\n<p><a href=\"/jekyll-theme-profile/repositories.html\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">repositories</code> is <a href=\"/jekyll-theme-profile/docs/configuration.html#repositories-optional\">configured</a> in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</li>\n <li>You may need to include the <code class=\"language-plaintext highlighter-rouge\">jekyll-github-metadata</code> plugin in your Gemfile and/or included in <code class=\"language-plaintext highlighter-rouge\">_config.yml</code>.\n ```\n plugins:\n <ul>\n <li>jekyll-github-metadata\n ```</li>\n </ul>\n </li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\"\n aria-disabled=\"false\">Paginate Timeline...</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"\n aria-disabled=\"false\">Pagination</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/layouts/repositories.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-usage\">Example Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Pagination | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Pagination\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Pagination\" />\n<meta property=\"og:description\" content=\"Pagination\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Pagination\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Pagination\",\"headline\":\"Pagination\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/pagination.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Pagination</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h1 id=\"pagination\">Pagination</h1>\n\n<p><code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> is a Jekyll plugin that adds pagination functionality to your site, allowing posts to be split across multiple pages instead of displaying all posts on a single page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>\n <p>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code>:</p>\n\n <div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"n\">group</span> <span class=\"ss\">:jekyll_plugins</span> <span class=\"k\">do</span>\n <span class=\"n\">gem</span> <span class=\"s2\">\"jekyll-paginate\"</span>\n<span class=\"k\">end</span>\n</code></pre></div> </div>\n\n <p>Then, install the plugin:</p>\n\n <div class=\"language-sh highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle <span class=\"nb\">install</span>\n</code></pre></div> </div>\n </li>\n <li>\n <p>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file:</p>\n\n <div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-paginate settings</span>\n<span class=\"na\">paginate</span><span class=\"pi\">:</span> <span class=\"m\">5</span> <span class=\"c1\"># Number of posts per page</span>\n<span class=\"na\">paginate_path</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">/blog/page:num\"</span> <span class=\"c1\"># URL structure for paginated pages</span>\n</code></pre></div> </div>\n </li>\n <li>\n <p>(optional) Add a index page <code class=\"language-plaintext highlighter-rouge\">blog/index.html</code></p>\n\n <div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code> ---\n title: My Blog\n layout: paginate\n ---\n</code></pre></div> </div>\n </li>\n</ol>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/blog/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/pagination/\">Jekyll Pagination Documentation</a></li>\n <li><a href=\"https://github.com/jekyll/jekyll-paginate\">jekyll-paginate Repository</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/layouts/repositories.html\"\n aria-disabled=\"false\">Repositories Layout</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\"\n aria-disabled=\"false\">Tagging</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/pagination.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#pagination\">Pagination</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n</li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Tagging | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Tagging\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<meta property=\"og:description\" content=\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Tagging\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"jekyll-tagging is a plugin that enables better tag support in Jekyll sites.\",\"headline\":\"Tagging\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/tagging.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Tagging</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><code class=\"language-plaintext highlighter-rouge\">jekyll-tagging</code> is a plugin that enables better tag support in Jekyll sites.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>Add the following line to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>gem 'jekyll-tagging`\n</code></pre></div></div>\n\n<ol>\n <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">tag_page_layout</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n<span class=\"na\">tag_page_dir</span><span class=\"pi\">:</span> <span class=\"s\">tags</span>\n</code></pre></div></div>\n\n<ol>\n <li>(optional) Add a tag index page <code class=\"language-plaintext highlighter-rouge\">tags/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Tags\nlayout: tag_index\n---\n</code></pre></div></div>\n\n<ol>\n <li>Add tags to your posts</li>\n</ol>\n\n<p>To assign tags to a post, include them in the front matter</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ntags: [jekyll, tutorial, plugins]\n---\n</code></pre></div></div>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/tags/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/posts/#tags\">Jekyll tags</a></li>\n <li><a href=\"https://github.com/pattex/jekyll-tagging\">jekyll-tagging repository</a></li>\n <li><a href=\"/jekyll-theme-profile/docs/posts.html#tags\">Posts documentation</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"\n aria-disabled=\"false\">Pagination</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"\n aria-disabled=\"false\">Category pages</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/tagging.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Category pages | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Category pages\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<meta property=\"og:description\" content=\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Category pages\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"jekyll-category-pages is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.\",\"headline\":\"Category pages\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/plugins/category-pages.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n plugins\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Category pages</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code> is a Jekyll plugin that automatically creates pages for each category in your site. Instead of manually setting up category pages, this plugin generates them dynamically based on your site’s posts.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<ol>\n <li>Add the following to your <code class=\"language-plaintext highlighter-rouge\">Gemfile</code></li>\n</ol>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>group :jekyll_plugins do\n gem \"jekyll-paginate\"\n gem \"jekyll-category-pages\"\nend\n</code></pre></div></div>\n\n<p>and install it</p>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>bundle install\n</code></pre></div></div>\n\n<ol>\n <li>Add the following settings to your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file</li>\n</ol>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># jekyll-category-pages settings</span>\n<span class=\"na\">category_path</span><span class=\"pi\">:</span> <span class=\"s\">category</span>\n<span class=\"na\">category_layout</span><span class=\"pi\">:</span> <span class=\"s\">category_layout.html</span>\n</code></pre></div></div>\n\n<ol>\n <li>(optional) Add a tag index page <code class=\"language-plaintext highlighter-rouge\">category/index.html</code> with the following content</li>\n</ol>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: Category\nlayout: category_index\n---\n</code></pre></div></div>\n\n<ol>\n <li>Add a category to your post</li>\n</ol>\n\n<p>To assign a category to a post, include it in the front matter</p>\n\n<div class=\"language-text highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>---\ntitle: My Sample Post\ncategory: sample\n---\n</code></pre></div></div>\n\n<p>Or place the post within a directory. The directory names will be automatically registered as categories for the post.</p>\n\n<h2 id=\"demo\">Demo</h2>\n\n<p><a href=\"/jekyll-theme-profile/category/\" class=\"btn\">Live demo</a></p>\n\n<h2 id=\"additional-resources\">Additional resources</h2>\n\n<ul>\n <li><a href=\"https://jekyllrb.com/docs/posts/#categories\">Jekyll categories</a></li>\n <li><a href=\"https://github.com/field-theory/jekyll-category-pages\">jekyll-category-pages repository</a></li>\n <li><a href=\"/jekyll-theme-profile/docs/posts.html#categories\">Posts</a></li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/tagging.html\"\n aria-disabled=\"false\">Tagging</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\"\n aria-disabled=\"false\">Collection Menu</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/plugins/category-pages.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#demo\">Demo</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#additional-resources\">Additional resources</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Collection Menu | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Collection Menu\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<meta property=\"og:description\" content=\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Collection Menu\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Collection Menu include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their category field. It is particularly useful for displaying structured documentation, guides, or other content collections.\",\"headline\":\"Collection Menu\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/collection-menu.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Collection Menu</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Collection Menu</strong> include file generates a dropdown navigation menu for a Jekyll collection, grouping items by their <code class=\"language-plaintext highlighter-rouge\">category</code> field. It is particularly useful for displaying structured documentation, guides, or other content collections.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Documentation\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">docs_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"docs-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.docs</code></td>\n <td>The Jekyll collection to display in the menu.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>None</td>\n <td>Display name for the collection in the menu header.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n <td>None</td>\n <td>Index page object for the collection, used as the main link in the menu header.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">id</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">collection-menu</code></td>\n <td>HTML <code class=\"language-plaintext highlighter-rouge\">id</code> attribute for the <code class=\"language-plaintext highlighter-rouge\"><details></code> element; useful for multiple instances.</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"example\">Example</h2>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>collection-menu.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials</span><span class=\"w\"> </span><span class=\"na\">name</span><span class=\"o\">=</span><span class=\"s2\">\"Tutorials\"</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">tutorials_index</span><span class=\"w\"> </span><span class=\"na\">id</span><span class=\"o\">=</span><span class=\"s2\">\"tutorials-menu\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Dropdown Menu:</strong>\n <ul>\n <li>Uses Primer CSS’s <code class=\"language-plaintext highlighter-rouge\">details-overlay</code> pattern to create a dropdown.</li>\n <li>Clicking the burger icon opens the menu; clicking outside or pressing the close button closes it.</li>\n </ul>\n </li>\n <li><strong>Collection Items Grouped by Category:</strong>\n <ul>\n <li>The menu groups collection documents by their <code class=\"language-plaintext highlighter-rouge\">category</code> front matter field.</li>\n <li>Each category is displayed as a section header.</li>\n </ul>\n </li>\n <li><strong>Current Page Highlighting:</strong>\n <ul>\n <li>The current page is marked with <code class=\"language-plaintext highlighter-rouge\">aria-current=\"page\"</code> when its URL matches the menu item.</li>\n </ul>\n </li>\n <li><strong>Optional Index Link:</strong>\n <ul>\n <li>If <code class=\"language-plaintext highlighter-rouge\">index</code> is provided, the collection name in the header becomes a link to the index page.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n <li><strong>Primer CSS:</strong> Classes like <code class=\"language-plaintext highlighter-rouge\">details-overlay</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, <code class=\"language-plaintext highlighter-rouge\">SideNav</code> are part of Primer’s styling system.</li>\n <li><strong>Octicons:</strong> For the close button icon.</li>\n <li><strong>jQuery:</strong> Required for the custom close button behavior.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<ol>\n <li><strong>Change Menu Appearance:</strong>\n <ul>\n <li>Adjust Primer CSS classes like <code class=\"language-plaintext highlighter-rouge\">SideNav</code>, <code class=\"language-plaintext highlighter-rouge\">SelectMenu</code>, or <code class=\"language-plaintext highlighter-rouge\">AppHeader-link</code>.</li>\n </ul>\n </li>\n <li><strong>Adjust Categories:</strong>\n <ul>\n <li>Ensure your collection items have a <code class=\"language-plaintext highlighter-rouge\">category</code> field in their front matter for grouping.</li>\n </ul>\n </li>\n <li><strong>Modify Close Behavior:</strong>\n <ul>\n <li>The script attached to the close button can be adapted or replaced with custom behavior if needed.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">id</code> parameter allows multiple instances of this menu to coexist on a page without conflicts.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">aria-haspopup</code> and <code class=\"language-plaintext highlighter-rouge\">aria-current</code> attributes enhance accessibility for the dropdown menu and navigation links.</li>\n <li>Ensure your site includes <strong>Primer CSS</strong> and <strong>jQuery</strong> for proper styling and behavior.</li>\n</ul>\n\n<p>By integrating <code class=\"language-plaintext highlighter-rouge\">collection-menu.html</code>, you can create a well-structured and accessible collection menu that enhances site navigation.</p>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"\n aria-disabled=\"false\">Category pages</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\"\n aria-disabled=\"false\">Link Card</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/collection-menu.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example\">Example</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Link Card | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Link Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<meta property=\"og:description\" content=\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Link Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.\",\"headline\":\"Link Card\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/link-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Link Card</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a card for displaying a link with optional thumbnail and description. It’s designed to be flexible and can display as either a clickable link or a text-only card.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">link_object</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing a <code class=\"language-plaintext highlighter-rouge\">link</code> object with the following properties:</p>\n\n<table>\n <thead>\n <tr>\n <th>Property</th>\n <th>Required</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">name</code></td>\n <td>Yes</td>\n <td>The name or title of the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">url</code></td>\n <td>No</td>\n <td>The URL for the link. If not provided, the card will be displayed as text-only</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">thumbnail</code></td>\n <td>No</td>\n <td>The path to an image to be used as a thumbnail</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">description</code></td>\n <td>No</td>\n <td>A brief description of the link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">octicon</code></td>\n <td>No</td>\n <td>An Octicon name to display instead of a thumbnail</td>\n </tr>\n </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">assign</span><span class=\"w\"> </span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"o\">=</span><span class=\"w\"> </span><span class=\"nv\">page</span><span class=\"p\">.</span><span class=\"nv\">featured_link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n<span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>link-card.html<span class=\"w\"> </span><span class=\"na\">link</span><span class=\"o\">=</span><span class=\"nv\">link</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include checks if a URL is provided for the link.</li>\n <li>If a URL is present:\n <ul>\n <li>It creates a clickable card with hover effects.</li>\n <li>Displays a thumbnail image or Octicon if provided.</li>\n <li>Shows the link name and description (if available).</li>\n </ul>\n </li>\n <li>If no URL is present:\n <ul>\n <li>It creates a non-clickable text card.</li>\n <li>Displays a thumbnail image if provided.</li>\n <li>Shows the link name and description (if available).</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file may depend on:</p>\n\n<ol>\n <li>Octicons: The GitHub icon set, used if an <code class=\"language-plaintext highlighter-rouge\">octicon</code> property is specified.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The include uses Liquid tags and filters, such as <code class=\"language-plaintext highlighter-rouge\">relative_url</code>, to ensure correct URL generation.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">octicon</code> functionality assumes you have the Octicons library or a similar icon system set up in your theme.</li>\n <li>The include uses responsive design principles with flexbox for layout.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\"\n aria-disabled=\"false\">Collection Menu</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/links.html\"\n aria-disabled=\"false\">Links</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/link-card.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Links | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Links\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<meta property=\"og:description\" content=\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Links\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a collection of link cards, typically used for displaying a set of important links on a page.\",\"headline\":\"Links\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/links.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Links</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a collection of link cards, typically used for displaying a set of important links on a page.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>links.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include doesn’t accept direct parameters. Instead, it relies on page or site-wide variables:</p>\n\n<table>\n <thead>\n <tr>\n <th>Variable</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">page.links</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.links</code></td>\n <td>The collection of links to display</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include looks for a <code class=\"language-plaintext highlighter-rouge\">links</code> variable, first on the current page, then falling back to the site configuration.</li>\n <li>It creates a container for the link cards.</li>\n <li>It iterates through each link in the collection and includes a <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> for each one.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">link-card.html</code>: Another include file that defines how each link card is displayed.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the links collection:</p>\n\n<ol>\n <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n <li>Edit the <code class=\"language-plaintext highlighter-rouge\">link-card.html</code> include to change how individual links are displayed.</li>\n <li>Adjust the container structure if you need a different layout for the links.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that you have defined a <code class=\"language-plaintext highlighter-rouge\">links</code> collection either in your page front matter or in your site’s configuration.</li>\n <li>The layout uses flexbox for responsive design, allowing the links to adapt to different screen sizes.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/link-card.html\"\n aria-disabled=\"false\">Link Card</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\"\n aria-disabled=\"false\">Paginator Navigation</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/links.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Paginator Navigation | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Paginator Navigation\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<meta property=\"og:description\" content=\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Paginator Navigation\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.\",\"headline\":\"Paginator Navigation\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/paginator-nav.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Paginator Navigation</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Paginator Navigation</strong> include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>You must also have <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\"><code class=\"language-plaintext highlighter-rouge\">pagination</code></a> installed.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include can be customized by passing in the following optional parameters:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">paginate_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.paginate_path</code></td>\n <td>Defines the pagination URL pattern (e.g., <code class=\"language-plaintext highlighter-rouge\">\"/blog/page/:num\"</code>).</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">previous_page_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">paginator.previous_page_path</code></td>\n <td>The URL for the previous page in the pagination sequence.</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">next_page_path</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">paginator.next_page_path</code></td>\n <td>The URL for the next page in the pagination sequence.</td>\n </tr>\n </tbody>\n</table>\n\n<p>This allows it to work with <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\"><code class=\"language-plaintext highlighter-rouge\">jekyll-category-pages</code></a></p>\n\n<h3 id=\"example-usage-with-parameters\">Example Usage with Parameters</h3>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>paginator_nav.html<span class=\"w\"> </span><span class=\"na\">paginate_path</span><span class=\"o\">=</span><span class=\"s2\">\"/blog/page/:num\"</span><span class=\"w\"> </span><span class=\"na\">previous_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">previous_page_path</span><span class=\"w\"> </span><span class=\"na\">next_page_path</span><span class=\"o\">=</span><span class=\"nv\">paginator</span><span class=\"p\">.</span><span class=\"nv\">next_page_path</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"example-output\">Example Output</h2>\n\n<p>When used in a paginated blog, the output might look like this:</p>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"paginate-container\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><div</span> <span class=\"na\">role=</span><span class=\"s\">\"navigation\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"Pagination\"</span> <span class=\"na\">class=</span><span class=\"s\">\"d-flex d-md-inline-block pagination\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><a</span> <span class=\"na\">class=</span><span class=\"s\">\"previous_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"prev\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">></span>Previous<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"1\"</span><span class=\"nt\">></span>1<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"2\"</span><span class=\"nt\">></span>2<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/3/\"</span> <span class=\"na\">aria-label=</span><span class=\"s\">\"3\"</span><span class=\"nt\">></span>3<span class=\"nt\"></a></span>\n <span class=\"nt\"><a</span> <span class=\"na\">class=</span><span class=\"s\">\"next_page\"</span> <span class=\"na\">rel=</span><span class=\"s\">\"next\"</span> <span class=\"na\">href=</span><span class=\"s\">\"/blog/page/2/\"</span> <span class=\"na\">aria-disabled=</span><span class=\"s\">\"false\"</span><span class=\"nt\">></span>Next<span class=\"nt\"></a></span>\n <span class=\"nt\"></div></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">paginator.total_pages</code> check ensures pagination is only displayed when necessary.</li>\n <li>The first page always links to the base URL instead of <code class=\"language-plaintext highlighter-rouge\">/page/1/</code> for cleaner URLs.</li>\n <li>This include is meant to be used in layouts that support pagination (<code class=\"language-plaintext highlighter-rouge\">jekyll-paginate</code> or <code class=\"language-plaintext highlighter-rouge\">jekyll-paginate-v2</code>).</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/links.html\"\n aria-disabled=\"false\">Links</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\"\n aria-disabled=\"false\">Post Gallery</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/paginator-nav.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#example-usage-with-parameters\">Example Usage with Parameters</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#example-output\">Example Output</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Gallery | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Gallery\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<meta property=\"og:description\" content=\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Gallery\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The post-gallery.html include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.\",\"headline\":\"Post Gallery\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-gallery.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Gallery</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> include file creates a magazine-style layout for displaying collections of posts. It’s designed to showcase posts in a visually appealing manner, with the first post of each section displayed prominently and subsequent posts in a more compact format.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td>Required</td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection_permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The permalink structure for individual collection pages</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> with the section slug</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n <td>3</td>\n <td>Number of posts to display per section</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-gallery.html<span class=\"w\">\n </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n </span><span class=\"na\">collection_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">4</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> to create a page that showcases posts from various categories.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">category_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Explore Our Categories</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-gallery.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">category_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/category/\" class=\"btn\">Category Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Section Display</strong>: For each section in the collection:\n <ul>\n <li>Displays a heading with the section name.</li>\n <li>Shows a “View all” link if there are more posts than the <code class=\"language-plaintext highlighter-rouge\">per_section</code> limit.</li>\n </ul>\n </li>\n <li><strong>Post Layout</strong>:\n <ul>\n <li>The first post in each section is displayed using <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code>.</li>\n <li>Subsequent posts use <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code>.</li>\n <li>Alternates the layout direction between sections for visual variety.</li>\n </ul>\n </li>\n <li><strong>Responsive Design</strong>:\n <ul>\n <li>Uses Primer classes for responsive layout.</li>\n <li>Adjusts layout based on the number of posts in the section.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code></li>\n <li><code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code></li>\n <li>Primer CSS classes</li>\n <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file. The layout uses Bootstrap grid classes, which can be adjusted to fit different design requirements.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-tease-image-card.html</code> and <code class=\"language-plaintext highlighter-rouge\">post-tease-text-card.html</code> includes are properly set up in your Jekyll site.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">{% cycle '', 'flex-row-reverse' %}</code> tag alternates the layout direction for visual interest.</li>\n <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\"\n aria-disabled=\"false\">Paginator Navigation</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\"\n aria-disabled=\"false\">Post Index</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-gallery.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Index | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Index\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<meta property=\"og:description\" content=\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Index\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Purpose The post-index.html include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.\",\"headline\":\"Post Index\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-index.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Index</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h2 id=\"purpose\">Purpose</h2>\n<p>The <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> include file creates a straightforward, list-style layout for displaying collections of posts. It’s designed to present posts in a uniform, easy-to-scan format, ideal for archives, category listings, or any situation where a clean, consistent display is desired.</p>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td>Required</td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection_permalink</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The permalink structure for individual collection pages</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">replace_value</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">:name</code></td>\n <td>The value to replace in the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> with the section slug</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">per_section</code></td>\n <td>6</td>\n <td>Number of posts to display per section</td>\n </tr>\n </tbody>\n</table>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll site, you can call it from a layout or another include file like this:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-index.html<span class=\"w\">\n </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">categories</span><span class=\"w\">\n </span><span class=\"na\">collection_permalink</span><span class=\"o\">=</span><span class=\"s1\">'/category/:name/'</span><span class=\"w\">\n </span><span class=\"na\">replace_value</span><span class=\"o\">=</span><span class=\"s1\">':name'</span><span class=\"w\">\n </span><span class=\"na\">per_section</span><span class=\"o\">=</span><span class=\"mi\">8</span><span class=\"w\">\n</span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h3 id=\"layout\">Layout</h3>\n\n<p>The <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout utilizes <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> to create a page that showcases posts with various tags.</p>\n\n<p>To use the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout in a page:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">layout</span><span class=\"pi\">:</span> <span class=\"s\">tag_index</span>\n<span class=\"na\">title</span><span class=\"pi\">:</span> <span class=\"s\">Tags</span>\n<span class=\"nn\">---</span>\n</code></pre></div></div>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-index.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">tag_index</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/tags/\" class=\"btn\">Tag Index Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li><strong>Section Display</strong>: For each section in the collection:\n <ul>\n <li>Displays a heading with the section name.</li>\n <li>Shows a “View all” link if there are more posts than the <code class=\"language-plaintext highlighter-rouge\">per_section</code> limit.</li>\n </ul>\n </li>\n <li><strong>Post Layout</strong>:\n <ul>\n <li>All posts within a section are displayed using <code class=\"language-plaintext highlighter-rouge\">post-card.html</code>.</li>\n <li>Posts are arranged in a flex-wrap layout, allowing for responsive design.</li>\n </ul>\n </li>\n <li><strong>Responsive Design</strong>:\n <ul>\n <li>Uses Bootstrap classes for responsive layout.</li>\n <li>The “View all” link is hidden on smaller screens and displayed on larger screens.</li>\n </ul>\n </li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include depends on:</p>\n<ul>\n <li><code class=\"language-plaintext highlighter-rouge\">post-card.html</code></li>\n <li>PRimer CSS classes</li>\n <li>Octicons for the “View all” arrow</li>\n</ul>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>You can customize the appearance by modifying the HTML structure and CSS classes within the include file. The layout uses Primer css flex and grid classes, which can be adjusted to fit different design requirements.</p>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post-card.html</code> include is properly set up in your Jekyll site.</li>\n <li>The “View all” link uses the <code class=\"language-plaintext highlighter-rouge\">collection_permalink</code> and <code class=\"language-plaintext highlighter-rouge\">replace_value</code> to generate the correct URL for each section.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\"\n aria-disabled=\"false\">Post Gallery</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"\n aria-disabled=\"false\">Post Timeline Card</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-index.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#purpose\">Purpose</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#layout\">Layout</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Timeline Card | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline Card\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<meta property=\"og:description\" content=\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Timeline Card\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"The Post Timeline Card include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).\",\"headline\":\"Post Timeline Card\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline-card.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Timeline Card</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>The <strong>Post Timeline Card</strong> include file is responsible for rendering individual posts within a timeline layout. It provides a structured and customizable way to display posts with metadata such as title, author, date, tags, and optional media (images or videos).</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line within a template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline-card.html<span class=\"w\"> </span><span class=\"na\">post</span><span class=\"o\">=</span><span class=\"nv\">post</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>This include requires a <code class=\"language-plaintext highlighter-rouge\">post</code> object to be passed, which contains various metadata fields. Below is a list of supported fields:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Required</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.url</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The permalink to the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.title</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The title of the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.author</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>The author of the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.date</code></td>\n <td>✅ Yes</td>\n <td>N/A</td>\n <td>The date the post was published</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.tags</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>An array of tags associated with the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.excerpt</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A short excerpt from the post</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.content</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>The full content of the post (used for “Continue Reading”)</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.type</code></td>\n <td>❌ No</td>\n <td><code class=\"language-plaintext highlighter-rouge\">comment</code></td>\n <td>The type of post, used for the Octicon badge</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.video</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A URL to an embedded video</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">post.image</code></td>\n <td>❌ No</td>\n <td>None</td>\n <td>A URL to a featured image</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">post-timeline</code> include, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Timeline Demo</a></p>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include relies on:</p>\n\n<ol>\n <li><strong>Octicons</strong>: The GitHub icon set for the badge next to the title.</li>\n <li><strong>CSS Styles</strong>: The <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code> and <code class=\"language-plaintext highlighter-rouge\">.IssueLabel</code> classes should be styled appropriately in your theme.</li>\n <li><strong>Jekyll Collections</strong>: The include expects a post-like object, typically from <code class=\"language-plaintext highlighter-rouge\">site.posts</code>.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To modify how posts are displayed:</p>\n\n<ol>\n <li><strong>Edit the CSS</strong>: Adjust the <code class=\"language-plaintext highlighter-rouge\">.TimelineItem</code>, <code class=\"language-plaintext highlighter-rouge\">.title</code>, and <code class=\"language-plaintext highlighter-rouge\">.summary</code> styles.</li>\n <li><strong>Modify the HTML</strong>: Change the markup within <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to match your theme.</li>\n <li><strong>Update the Octicons</strong>: Modify the <code class=\"language-plaintext highlighter-rouge\">post.type</code> value to change the icon displayed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>Ensure that the <code class=\"language-plaintext highlighter-rouge\">post</code> object is correctly passed when including this file.</li>\n <li>If <code class=\"language-plaintext highlighter-rouge\">post.type</code> is not provided, it defaults to <code class=\"language-plaintext highlighter-rouge\">comment</code> for the Octicon.</li>\n <li>The layout is designed to be responsive and adaptable to different screen sizes.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for post links to ensure compatibility with different site configurations.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-index.html\"\n aria-disabled=\"false\">Post Index</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"\n aria-disabled=\"false\">Post Timeline</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-timeline-card.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Post Timeline | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Post Timeline\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<meta property=\"og:description\" content=\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Post Timeline\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.\",\"headline\":\"Post Timeline\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/includes/post-timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n includes\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Post Timeline</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>This include file generates a timeline of posts with an optional “View all” link at the end. It’s designed to be flexible and customizable through various parameters.</p>\n\n<h2 id=\"usage\">Usage</h2>\n\n<p>To use this include in your Jekyll theme, add the following line to your template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"parameters\">Parameters</h2>\n\n<p>You can customize the behavior of this include by passing the following parameters:</p>\n\n<table>\n <thead>\n <tr>\n <th>Parameter</th>\n <th>Default</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">collection</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.posts</code></td>\n <td>The collection of posts to display</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">index</code></td>\n <td>None</td>\n <td>The URL for the “View all” link</td>\n </tr>\n <tr>\n <td><code class=\"language-plaintext highlighter-rouge\">limit</code></td>\n <td><code class=\"language-plaintext highlighter-rouge\">site.pagination</code> or <code class=\"language-plaintext highlighter-rouge\">-1</code></td>\n <td>Number of posts to display</td>\n </tr>\n </tbody>\n</table>\n\n<p>Example with parameters:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">articles</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"na\">index</span><span class=\"o\">=</span><span class=\"s2\">\"/articles/\"</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<p>If the limit is set to a number below 0, all posts will show.</p>\n\n<h3 id=\"demo-page\">Demo Page</h3>\n\n<p>To see <code class=\"language-plaintext highlighter-rouge\">post-timeline.html</code> in action within the <code class=\"language-plaintext highlighter-rouge\">paginate_timeline</code> layout, visit our demo page:</p>\n\n<p><a href=\"/jekyll-theme-profile/timeline.html\" class=\"btn\">Post Timeline Demo</a></p>\n\n<h2 id=\"functionality\">Functionality</h2>\n\n<ol>\n <li>The include sets up initial variables based on the provided parameters or default values.</li>\n <li>It sorts the collection by date in reverse order (newest first).</li>\n <li>It creates a container for the timeline posts.</li>\n <li>It iterates through the specified collection (limited by <code class=\"language-plaintext highlighter-rouge\">limit</code> if set) and includes a <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> for each post.</li>\n <li>If there are more posts in the collection than the displayed limit, it adds a “View all” link at the bottom.</li>\n</ol>\n\n<h2 id=\"dependencies\">Dependencies</h2>\n\n<p>This include file depends on:</p>\n\n<ol>\n <li><code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code>: Another include file that should define how each post card is displayed.</li>\n <li>Octicons: The GitHub icon set, used for the chevron-right icon in the “View all” link.</li>\n</ol>\n\n<h2 id=\"customization\">Customization</h2>\n\n<p>To customize the appearance of the timeline:</p>\n\n<ol>\n <li>Modify the CSS classes in this file to change the layout and spacing.</li>\n <li>Edit the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> include to change how individual posts are displayed.</li>\n <li>Adjust the “View all” link text and styling as needed.</li>\n</ol>\n\n<h2 id=\"notes\">Notes</h2>\n\n<ul>\n <li>The <code class=\"language-plaintext highlighter-rouge\">collection</code> parameter defaults to <code class=\"language-plaintext highlighter-rouge\">site.posts</code> if not specified.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">limit</code> parameter is optional. If not set, all posts in the collection will be displayed.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">index</code> parameter is required for the “View all” link to function properly.</li>\n <li>The <code class=\"language-plaintext highlighter-rouge\">relative_url</code> filter is used for the “View all” link, which is a Jekyll filter for generating correct URLs in different site configurations.</li>\n <li>The layout uses responsive design classes (<code class=\"language-plaintext highlighter-rouge\">container-xl</code>, <code class=\"language-plaintext highlighter-rouge\">p-responsive-blog</code>, etc.) for optimal display on various screen sizes.</li>\n</ul>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\"\n aria-disabled=\"false\">Post Timeline Card</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/custom-styles.html\"\n aria-disabled=\"false\">Custom styles</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/includes/post-timeline.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#usage\">Usage</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#parameters\">Parameters</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#demo-page\">Demo Page</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#functionality\">Functionality</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#dependencies\">Dependencies</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customization\">Customization</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#notes\">Notes</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Custom styles | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta property=\"og:description\" content=\"Site style\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Custom styles</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override any style with styles defined in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code> files. This is to support config based styling which needs jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add css to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"\n aria-disabled=\"false\">Post Timeline</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/github-action.html\"\n aria-disabled=\"false\">Using with a GitH...</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/custom-styles.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Using with a GitHub action | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Using with a GitHub action\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<meta property=\"og:description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"twitter:title\" content=\"Using with a GitHub action\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"You can also use this with GitHub actions. Below is a typical workflow file\",\"headline\":\"Using with a GitHub action\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Using with a GitHub action</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>You can also use this with GitHub actions. Below is a typical workflow file</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Sample workflow for building and deploying a Jekyll site to GitHub Pages</span>\n<span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n\n<span class=\"na\">on</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Runs on pushes targeting the default branch</span>\n <span class=\"na\">push</span><span class=\"pi\">:</span>\n <span class=\"na\">branches</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"s2\">\"</span><span class=\"s\">main\"</span><span class=\"pi\">]</span>\n\n <span class=\"c1\"># Run on every pull request</span>\n <span class=\"na\">pull_request</span><span class=\"pi\">:</span>\n <span class=\"na\">types</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">opened</span><span class=\"pi\">,</span> <span class=\"nv\">reopened</span><span class=\"pi\">,</span> <span class=\"nv\">synchronize</span> <span class=\"pi\">]</span>\n\n <span class=\"c1\"># Allows you to run this workflow manually from the Actions tab</span>\n <span class=\"na\">workflow_dispatch</span><span class=\"pi\">:</span>\n\n <span class=\"na\">schedule</span><span class=\"pi\">:</span>\n <span class=\"c1\"># This will refresh your repositories and other user information every day</span>\n <span class=\"c1\"># * is a special character in YAML so you have to quote this string</span>\n <span class=\"c1\"># Generate from https://crontab.guru/</span>\n <span class=\"c1\"># ┌───────────── minute (0 - 59)</span>\n <span class=\"c1\"># │ ┌───────────── hour (0 - 23)</span>\n <span class=\"c1\"># │ │ ┌───────────── day of the month (1 - 31)</span>\n <span class=\"c1\"># │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)</span>\n <span class=\"c1\"># │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># * * * * *</span>\n <span class=\"pi\">-</span> <span class=\"na\">cron</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*\"</span>\n\n<span class=\"c1\"># Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages</span>\n<span class=\"na\">permissions</span><span class=\"pi\">:</span>\n <span class=\"na\">contents</span><span class=\"pi\">:</span> <span class=\"s\">read</span> <span class=\"c1\"># needed to read your repository</span>\n <span class=\"na\">pages</span><span class=\"pi\">:</span> <span class=\"s\">write</span> <span class=\"c1\"># needed to enable and deploy github pages</span>\n <span class=\"na\">id-token</span><span class=\"pi\">:</span> <span class=\"s\">write</span>\n\n<span class=\"c1\"># Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.</span>\n<span class=\"c1\"># However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.</span>\n<span class=\"na\">concurrency</span><span class=\"pi\">:</span>\n <span class=\"na\">group</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">pages\"</span>\n <span class=\"na\">cancel-in-progress</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n\n<span class=\"na\">jobs</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Build job</span>\n <span class=\"na\">build</span><span class=\"pi\">:</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Checkout</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/checkout@v3</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Ruby</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">ruby/setup-ruby@v1.152.0</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">bundler-cache</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># runs 'bundle install' and caches installed gems automatically</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">pages</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/configure-pages@v3</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">enablement</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Enable github pages if it's not</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Build</span>\n <span class=\"na\">run</span><span class=\"pi\">:</span> <span class=\"s\">bundle exec jekyll build</span>\n <span class=\"na\">env</span><span class=\"pi\">:</span>\n <span class=\"na\">JEKYLL_ENV</span><span class=\"pi\">:</span> <span class=\"s\">production</span>\n <span class=\"na\">JEKYLL_GITHUB_TOKEN</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Upload artifact</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/upload-pages-artifact@v3</span>\n\n <span class=\"c1\"># Deployment job</span>\n <span class=\"na\">deploy</span><span class=\"pi\">:</span>\n <span class=\"na\">if</span><span class=\"pi\">:</span> <span class=\"s\">github.ref == 'refs/heads/main'</span> <span class=\"c1\"># Only deploy from the main branch</span>\n <span class=\"na\">environment</span><span class=\"pi\">:</span>\n <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">github-pages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">needs</span><span class=\"pi\">:</span> <span class=\"s\">build</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Deploy to GitHub Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">deployment</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/deploy-pages@v4</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/custom-styles.html\"\n aria-disabled=\"false\">Custom styles</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/debug.html\"\n aria-disabled=\"false\">Debug</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/github-action.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>{{ jekyll.version }}</pre>\n\n\n<h1 id=\"environment-variables\">Jekyll environment</h1>\n<pre>{{ jekyll.environment }}</pre>\n\n\n<h1 id=\"site-variables\">Site Variables</h1>\n<pre>{{ site | inspect }}</pre>\n\n<h1 id=\"page-variables\">Page Variables</h1>\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n<h1 id=\"paginator-variables\">Paginator Variables</h1>\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n"
],
"related_posts": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"config": null,
"data": {},
"pages": [
"## Welcome to another page\n\n_yay_\n",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"This is a appbar style page with a custom background and overlay.\n",
"This is a docs layout with a custom background image and overlay.\n",
"This is a sidebar style page with custom background and overlay.\n",
"This is a stacked style page with a custom background and overlay.\n",
"This is a topbar style page with a custom background and overlay.\n",
"This is a custom background and overlay\n",
"This is a landing page with a custom header color.\n",
"This is a sidebar style page with a custom header color\n",
"This is a stacked page with a custom header color\n",
"This is a topbar style page with a custom header color\n",
"This is a landing layout with a custom header image.\n",
"This is a sidebar style page with a custom header image.\n",
"This is a stacked style page with a custom header image.\n",
"This is a topbar style page with a custom header image.\n",
"",
"",
"",
"",
"# Welcome to jekyll-theme-profile theme!\n\nThis theme is based on GitHub's primer style. It supports both light and dark modes, and four style options: \n\n- [appbar](/jekyll-theme-profile/appbar.html)\n- [sidebar](/jekyll-theme-profile/sidebar.html)\n- [topbar](/jekyll-theme-profile/topbar.html)\n- [stacked](/jekyll-theme-profile/stacked.html)\n\nSetting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly.\n",
"",
"",
"",
"",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"",
"{% assign jekyll_version=jekyll.version | split: \".\" | first %}\n{% if jekyll_version == '3' %}\n/* Jekyll version 3 detected */\n@import 'jekyll-theme-profile-compat';\n{% else %}\n/* Jekyll version 4+ detected */\n@use 'jekyll-theme-profile';\n{% endif %}\n\n:root{\n --color-profile-text: var(--color-fg-default);\n --color-profile-accent: var(--color-accent-fg);\n --color-profile-bg: var(--color-canvas-default);\n}\n",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
"",
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n{% if page.xsl %}<?xml-stylesheet type=\"text/xsl\" href=\"{{ \"/sitemap.xsl\" | absolute_url }}\"?>\n{% endif %}<urlset xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd\" xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n{% assign collections = site.collections | where_exp:'collection','collection.output != false' %}{% for collection in collections %}{% assign docs = collection.docs | where_exp:'doc','doc.sitemap != false' %}{% for doc in docs %}<url>\n<loc>{{ doc.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n{% if doc.last_modified_at or doc.date %}<lastmod>{{ doc.last_modified_at | default: doc.date | date_to_xmlschema }}</lastmod>\n{% endif %}</url>\n{% endfor %}{% endfor %}{% assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != \"/404.html\"' %}{% for page in pages %}<url>\n<loc>{{ page.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n{% if page.last_modified_at %}<lastmod>{{ page.last_modified_at | date_to_xmlschema }}</lastmod>\n{% endif %}</url>\n{% endfor %}{% assign static_files = page.static_files | where_exp:'page','page.sitemap != false' | where_exp:'page','page.name != \"404.html\"' %}{% for file in static_files %}<url>\n<loc>{{ file.path | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>\n<lastmod>{{ file.modified_time | date_to_xmlschema }}</lastmod>\n</url>\n{% endfor %}</urlset>\n",
"Sitemap: {{ \"sitemap.xml\" | absolute_url }}\n"
],
"time": "2025-07-25 01:49:18 +0000",
"static_files": [
{
"name": "appbar-icon.png",
"path": "/media/appbar-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "appbar-icon",
"extname": ".png",
"collection": null
},
{
"name": "appbar-laptop.png",
"path": "/media/appbar-laptop.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "appbar-laptop",
"extname": ".png",
"collection": null
},
{
"name": "appbar-phone.png",
"path": "/media/appbar-phone.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "appbar-phone",
"extname": ".png",
"collection": null
},
{
"name": "appbar-preview.png",
"path": "/media/appbar-preview.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "appbar-preview",
"extname": ".png",
"collection": null
},
{
"name": "appbar-tablet.png",
"path": "/media/appbar-tablet.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "appbar-tablet",
"extname": ".png",
"collection": null
},
{
"name": "background-img.jpg",
"path": "/media/background-img.jpg",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "background-img",
"extname": ".jpg",
"collection": null
},
{
"name": "blog-post-icon.png",
"path": "/media/blog-post-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "blog-post-icon",
"extname": ".png",
"collection": null
},
{
"name": "blog-timeline-feature.png",
"path": "/media/blog-timeline-feature.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "blog-timeline-feature",
"extname": ".png",
"collection": null
},
{
"name": "blog.png",
"path": "/media/blog.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "blog",
"extname": ".png",
"collection": null
},
{
"name": "category-icon.png",
"path": "/media/category-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "category-icon",
"extname": ".png",
"collection": null
},
{
"name": "custom-background-feature.png",
"path": "/media/custom-background-feature.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "custom-background-feature",
"extname": ".png",
"collection": null
},
{
"name": "custom-header-feature.png",
"path": "/media/custom-header-feature.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "custom-header-feature",
"extname": ".png",
"collection": null
},
{
"name": "icon-bg.png",
"path": "/media/icon-bg.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "icon-bg",
"extname": ".png",
"collection": null
},
{
"name": "icon-sidebar.png",
"path": "/media/icon-sidebar.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "icon-sidebar",
"extname": ".png",
"collection": null
},
{
"name": "icon-stacked.png",
"path": "/media/icon-stacked.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "icon-stacked",
"extname": ".png",
"collection": null
},
{
"name": "icon-topbar.png",
"path": "/media/icon-topbar.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "icon-topbar",
"extname": ".png",
"collection": null
},
{
"name": "landing.png",
"path": "/media/landing.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "landing",
"extname": ".png",
"collection": null
},
{
"name": "links.png",
"path": "/media/links.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "links",
"extname": ".png",
"collection": null
},
{
"name": "nav.png",
"path": "/media/nav.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "nav",
"extname": ".png",
"collection": null
},
{
"name": "octocat.png",
"path": "/media/octocat.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "octocat",
"extname": ".png",
"collection": null
},
{
"name": "repositories.png",
"path": "/media/repositories.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "repositories",
"extname": ".png",
"collection": null
},
{
"name": "sidebar-icon.png",
"path": "/media/sidebar-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "sidebar-icon",
"extname": ".png",
"collection": null
},
{
"name": "sidebar-laptop.png",
"path": "/media/sidebar-laptop.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "sidebar-laptop",
"extname": ".png",
"collection": null
},
{
"name": "sidebar-phone.png",
"path": "/media/sidebar-phone.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "sidebar-phone",
"extname": ".png",
"collection": null
},
{
"name": "sidebar-preview.png",
"path": "/media/sidebar-preview.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "sidebar-preview",
"extname": ".png",
"collection": null
},
{
"name": "sidebar-tablet.png",
"path": "/media/sidebar-tablet.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "sidebar-tablet",
"extname": ".png",
"collection": null
},
{
"name": "social-media.png",
"path": "/media/social-media.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "social-media",
"extname": ".png",
"collection": null
},
{
"name": "stacked-icon.png",
"path": "/media/stacked-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "stacked-icon",
"extname": ".png",
"collection": null
},
{
"name": "stacked-laptop.png",
"path": "/media/stacked-laptop.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "stacked-laptop",
"extname": ".png",
"collection": null
},
{
"name": "stacked-phone.png",
"path": "/media/stacked-phone.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "stacked-phone",
"extname": ".png",
"collection": null
},
{
"name": "stacked-preview.png",
"path": "/media/stacked-preview.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "stacked-preview",
"extname": ".png",
"collection": null
},
{
"name": "stacked-tablet.png",
"path": "/media/stacked-tablet.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "stacked-tablet",
"extname": ".png",
"collection": null
},
{
"name": "syntax-lineno.png",
"path": "/media/syntax-lineno.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "syntax-lineno",
"extname": ".png",
"collection": null
},
{
"name": "tobpar-phone.png",
"path": "/media/tobpar-phone.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "tobpar-phone",
"extname": ".png",
"collection": null
},
{
"name": "topbar-icon.png",
"path": "/media/topbar-icon.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "topbar-icon",
"extname": ".png",
"collection": null
},
{
"name": "topbar-laptop.png",
"path": "/media/topbar-laptop.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "topbar-laptop",
"extname": ".png",
"collection": null
},
{
"name": "topbar-preview.png",
"path": "/media/topbar-preview.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "topbar-preview",
"extname": ".png",
"collection": null
},
{
"name": "topbar-tablet.png",
"path": "/media/topbar-tablet.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "topbar-tablet",
"extname": ".png",
"collection": null
},
{
"name": "default.png",
"path": "/assets/img/default.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "default",
"extname": ".png",
"collection": null
},
{
"name": "favicon.ico",
"path": "/assets/img/favicon.ico",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "favicon",
"extname": ".ico",
"collection": null
},
{
"name": "social-preview.png",
"path": "/assets/img/social-preview.png",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "social-preview",
"extname": ".png",
"collection": null
},
{
"name": "user-image.jpg",
"path": "/assets/img/user-image.jpg",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "user-image",
"extname": ".jpg",
"collection": null
},
{
"name": "anchor-links.js",
"path": "/assets/js/anchor-links.js",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "anchor-links",
"extname": ".js",
"collection": null
},
{
"name": "theme-toggle.js",
"path": "/assets/js/theme-toggle.js",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "theme-toggle",
"extname": ".js",
"collection": null
},
{
"name": "topbar.js",
"path": "/assets/js/topbar.js",
"modified_time": "2025-07-25 01:48:59 +0000",
"basename": "topbar",
"extname": ".js",
"collection": null
}
],
"categories": {
"examples": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"style": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"news": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
]
},
"posts": [
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Header Colors | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Header Colors\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Take control of your post headers with custom colors and images\" />\n<meta property=\"og:description\" content=\"Take control of your post headers with custom colors and images\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-02-02T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Header Colors\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-02-02T00:00:00+00:00\",\"datePublished\":\"2025-02-02T00:00:00+00:00\",\"description\":\"Take control of your post headers with custom colors and images\",\"headline\":\"Introducing Custom Header Colors\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-header-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2025/02/02/custom-header.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Header Colors</div>\n <p class=\"f4-mktg color-header-default\">Take control of your post headers with custom colors and images</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-header-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Header Colors\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Feb 02, 2025\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Header+Colors&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html;t=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2025%2F02%2F02%2Fcustom-header.html%2F&title=Introducing+Custom+Header+Colors\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to announce a new feature that allows you to fully customize your post headers with colors, images, and overlays. This gives you the flexibility to create headers that match your content and branding perfectly.</p>\n\n<h2 id=\"what-can-you-customize\">What Can You Customize?</h2>\n\n<p>With the new header settings, you can customize:</p>\n\n<ul>\n <li><strong>Background</strong> – Choose <strong>either a solid color</strong>, <strong>an image</strong>, or <strong>an image with an overlay</strong> for the header background.</li>\n <li><strong>Text color</strong> – Set the color of the title and description text.</li>\n <li><strong>Accent color</strong> – Control the color of links and other accent elements.</li>\n</ul>\n\n<h2 id=\"how-to-configure-it\">How to Configure It</h2>\n\n<p>You can set these styles in your post’s front matter or site-wide in your <code class=\"language-plaintext highlighter-rouge\">_config.yml</code> file.</p>\n\n<h3 id=\"custom-text\">Custom text</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">text</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">rgba(255,255,255,0.7)\"</span> <span class=\"c1\"># Text color</span>\n <span class=\"na\">accent</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#ffffff\"</span> <span class=\"c1\"># Accent color</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-color\">Custom header color</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">color</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">#4051b5\"</span> <span class=\"c1\"># Solid background color (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"custom-header-image\">Custom header image</h3>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">header</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">/media/background-img.jpg</span> <span class=\"c1\"># Background image (optional)</span>\n <span class=\"na\">overlay</span><span class=\"pi\">:</span> <span class=\"s\">rgba(0, 0, 0, 0.5)</span> <span class=\"c1\"># Overlay for background image (optional)</span>\n</code></pre></div></div>\n\n<h3 id=\"key-usage-notes\">Key Usage Notes:</h3>\n<ul>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">color</code> alone</strong> for a solid color background.</li>\n <li>You can <strong>specify <code class=\"language-plaintext highlighter-rouge\">image</code> alone</strong> to use an image as the background.</li>\n <li>You can <strong>combine <code class=\"language-plaintext highlighter-rouge\">image</code> and <code class=\"language-plaintext highlighter-rouge\">overlay</code></strong> to apply a transparent overlay on top of the image for better text readability.</li>\n</ul>\n\n<h2 id=\"learn-more\">Learn More</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-header.html\" class=\"btn\">Live Demo</a></p>\n\n<p>For full configuration details, refer to the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-custom-header-colors\">Set Custom Header Colors section in the documentation</a>.</p>\n\n<h2 id=\"start-customizing\">Start Customizing</h2>\n\n<p>Sometimes a post just needs a little extra flair at the top. Maybe it’s a splash of your brand color, or a photo that sets the mood before a reader even starts. Now you can do that—no fuss, just set the color or drop in an image. We’ve already had fun playing with it; hope you do too.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/header\">header</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#what-can-you-customize\">What Can You Customize?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-to-configure-it\">How to Configure It</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-text\">Custom text</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-color\">Custom header color</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#custom-header-image\">Custom header image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#key-usage-notes\">Key Usage Notes:</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#learn-more\">Learn More</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#start-customizing\">Start Customizing</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Introducing Custom Backgrounds | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Introducing Custom Backgrounds\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<meta property=\"og:description\" content=\"Customize the theme with your own style by setting a custom background color, image, and overlays.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-11-20T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\" />\n<meta property=\"twitter:title\" content=\"Introducing Custom Backgrounds\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-11-20T00:00:00+00:00\",\"datePublished\":\"2024-11-20T00:00:00+00:00\",\"description\":\"Customize the theme with your own style by setting a custom background color, image, and overlays.\",\"headline\":\"Introducing Custom Backgrounds\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/custom-background-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/11/20/custom-background.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Introducing Custom Backgrounds</div>\n <p class=\"f4-mktg color-header-default\">Customize the theme with your own style by setting a custom background color, image, and overlays.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/custom-background-feature.png\" class=\"cover-image rounded-2\" alt=\"Introducing Custom Backgrounds\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 20, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Introducing+Custom+Backgrounds&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html;t=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F11%2F20%2Fcustom-background.html%2F&title=Introducing+Custom+Backgrounds\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>I’m excited to introduce a new feature that allows you to set custom background images for your posts. This feature gives you more creative control over the look and feel of your content, making it easier to align your post’s visuals with your message.</p>\n\n<h2 id=\"why-use-custom-backgrounds\">Why Use Custom Backgrounds?</h2>\n\n<p>Custom backgrounds can:</p>\n\n<ul>\n <li><strong>Enhance visual appeal</strong> – Make your posts stand out with eye-catching imagery.</li>\n <li><strong>Set the mood</strong> – Use imagery to reflect the tone of your content.</li>\n <li><strong>Support your brand</strong> – Maintain a consistent visual identity across your posts.</li>\n</ul>\n\n<h2 id=\"how-it-works\">How It Works</h2>\n\n<p>Adding a custom background is easy. Simply include a <code class=\"language-plaintext highlighter-rouge\">background.image</code> field in your post’s front matter, like this:</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"na\">background</span><span class=\"pi\">:</span>\n <span class=\"na\">image</span><span class=\"pi\">:</span> <span class=\"s\">https://example.com/your-background-image.jpg</span>\n</code></pre></div></div>\n\n<p>You can also fine-tune the styling using the <code class=\"language-plaintext highlighter-rouge\">css_style</code> field, allowing you to adjust the appearance as needed.</p>\n\n<h2 id=\"see-it-in-action\">See It in Action</h2>\n\n<p><a href=\"/jekyll-theme-profile/custom-background.html\" class=\"btn\">Live demo</a></p>\n\n<p>Want to dive deeper? Check out the <a href=\"/jekyll-theme-profile/docs/configuration.html#set-a-custom-background-and-image-overlay\">docs</a> for more details and additional examples.</p>\n\n<h2 id=\"get-creative\">Get Creative!</h2>\n\n<p>We can’t wait to see how you use custom backgrounds to personalize your posts. Try it out and let your content shine.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/customization\">customization</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/background\">background</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#why-use-custom-backgrounds\">Why Use Custom Backgrounds?</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#how-it-works\">How It Works</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#see-it-in-action\">See It in Action</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#get-creative\">Get Creative!</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" width=\"377\" height=\"200\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/08/08/timeline.html\">Showcase Your Content with the Jekyll Timeline Feature</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Aug 08, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Showcase Your Content with the Jekyll Timeline Feature | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<meta property=\"og:description\" content=\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2024-08-08T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\" />\n<meta property=\"twitter:title\" content=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2024-08-08T00:00:00+00:00\",\"datePublished\":\"2024-08-08T00:00:00+00:00\",\"description\":\"The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.\",\"headline\":\"Showcase Your Content with the Jekyll Timeline Feature\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/media/blog-timeline-feature.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/news/2024/08/08/timeline.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Showcase Your Content with the Jekyll Timeline Feature</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/media/blog-timeline-feature.png\" class=\"cover-image rounded-2\" alt=\"Showcase Your Content with the Jekyll Timeline Feature\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Aug 08, 2024\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html;t=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fnews%2F2024%2F08%2F08%2Ftimeline.html%2F&title=Showcase+Your+Content+with+the+Jekyll+Timeline+Feature\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>The timeline feature is a sleek, chronological display of your content. It’s designed to present your posts, updates, or any time-based information in an easy-to-read, visually appealing format. With customizable options and responsive design, it’s a powerful addition to this theme.</p>\n\n<h2 id=\"setting-up-your-timeline\">Setting Up Your Timeline</h2>\n\n<p>Implementing the timeline is as easy as adding a single line to your Jekyll template:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">posts</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">5</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</h2>\n\n<p>For businesses, the timeline can serve as a dynamic news feed:</p>\n\n<ul>\n <li><strong>Share company milestones</strong>: Highlight key achievements, new partnerships, or important announcements.</li>\n <li><strong>Showcase growth</strong>: Present your company’s journey in a visual, chronological format.</li>\n <li><strong>Engage stakeholders</strong>: Keep investors, employees, and customers informed about your latest developments.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">news</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-2-changelogs\">Use Case 2: Changelogs</h2>\n\n<p>For software developers or product managers, the timeline is perfect for displaying changelogs. It allows you to:</p>\n\n<ul>\n <li><strong>Organize updates chronologically</strong>: Present your software updates, bug fixes, and new features in a clear, date-based format.</li>\n <li><strong>Highlight major releases</strong>: Use the <code class=\"language-plaintext highlighter-rouge\">post-timeline-card.html</code> to style major releases differently, making them stand out.</li>\n <li><strong>Provide a historical view</strong>: Users can easily track the evolution of your product over time.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">changelogs</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">20</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</h2>\n\n<p>For creatives and professionals, the timeline can be adapted to showcase your work:</p>\n\n<ul>\n <li><strong>Display projects chronologically</strong>: Show the evolution of your skills and style over time.</li>\n <li><strong>Highlight key works</strong>: Use the limit parameter to feature your most significant or recent projects.</li>\n <li><strong>Tell your professional story</strong>: Each entry can include details about the project, skills used, or outcomes achieved.</li>\n</ul>\n\n<p>Example:</p>\n\n<div class=\"language-liquid highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">{%</span><span class=\"w\"> </span><span class=\"nt\">include</span><span class=\"w\"> </span>post-timeline.html<span class=\"w\"> </span><span class=\"na\">collection</span><span class=\"o\">=</span><span class=\"nv\">site</span><span class=\"p\">.</span><span class=\"nv\">portfolio</span><span class=\"w\"> </span><span class=\"na\">limit</span><span class=\"o\">=</span><span class=\"mi\">12</span><span class=\"w\"> </span><span class=\"cp\">%}</span>\n</code></pre></div></div>\n\n<h2 id=\"customizing-your-timeline\">Customizing Your Timeline</h2>\n\n<p>The timeline feature is highly customizable, allowing you to tailor it to your specific needs and design preferences. To learn more about how to customize your timeline, including available parameters, CSS classes, and dependencies, please refer to our detailed documentation:</p>\n\n<p><a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\">Post Timeline Documentation</a></p>\n\n<p>This documentation provides in-depth information on:</p>\n\n<ul>\n <li>All available parameters and their usage</li>\n <li>How to modify the appearance of the timeline</li>\n <li>Dependencies and required files</li>\n <li>Tips for integrating the timeline with your Jekyll theme</li>\n</ul>\n\n<h2 id=\"bringing-it-all-together\">Bringing It All Together</h2>\n\n<p>The timeline feature is a way to tell a story. Whether you’re narrating your blog’s journey, showcasing your product’s evolution, or presenting your company’s growth, the timeline provides a visually compelling way to display your content.</p>\n\n<p>Give it a try and don’t be afraid to tweak it to suit your style. Happy timeline creating!</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/news\">news</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/includes\">includes</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#setting-up-your-timeline\">Setting Up Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-1-company-news-and-updates\">Use Case 1: Company News and Updates</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-2-changelogs\">Use Case 2: Changelogs</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#use-case-3-portfolio-timeline\">Use Case 3: Portfolio Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#customizing-your-timeline\">Customizing Your Timeline</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#bringing-it-all-together\">Bringing It All Together</a></li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with video | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with video\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-12-14T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Empty post with video\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-12-14T00:00:00+00:00\",\"datePublished\":\"2023-12-14T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with video\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/12/14/video.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with video</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Empty post with video\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Dec 14, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+video&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html;t=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F12%2F14%2Fvideo.html%2F&title=Empty+post+with+video\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <div id=\"Timeline-video-container\" class=\"image-container mb-5\">\n <iframe id=\"Timeline-video\" src=\"https://www.youtube.com/embed/E4WlUXrJgy4?si=BhUjhwehMIZME9Cf\" frameborder=\"0\" height=\"inherited\"\n width=\"inherited\"></iframe>\n </div>\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/video\">video</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Empty post with image | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Empty post with image\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<meta property=\"og:description\" content=\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-21T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" />\n<meta property=\"twitter:title\" content=\"Empty post with image\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-11-21T00:00:00+00:00\",\"datePublished\":\"2023-11-21T00:00:00+00:00\",\"description\":\"This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.\",\"headline\":\"Empty post with image\",\"image\":\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2023/11/21/empty.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Empty post with image</div>\n <p class=\"f4-mktg color-header-default\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" class=\"cover-image rounded-2\" alt=\"Empty post with image\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 21, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Empty+post+with+image&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html;t=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2023%2F11%2F21%2Fempty.html%2F&title=Empty+post+with+image\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n \n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a appbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a appbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the appbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the appbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-11-10T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a appbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-11-10T00:00:00+00:00\",\"datePublished\":\"2023-11-10T00:00:00+00:00\",\"description\":\"This is an example of a post with the appbar style.\",\"headline\":\"This is a appbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/11/10/post-appbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a appbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the appbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a appbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Nov 10, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+appbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html;t=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F11%2F10%2Fpost-appbar.html%2F&title=This+is+a+appbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/appbar\">appbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a topbar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a topbar post style\" />\n<meta name=\"author\" content=\"George P. Burdell\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the topbar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the topbar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" />\n<meta property=\"twitter:title\" content=\"This is a topbar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"author\":{\"@type\":\"Person\",\"name\":\"George P. Burdell\"},\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the topbar style.\",\"headline\":\"This is a topbar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-topbar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n<script>\n $(document).ready(function () {\n $('#expansion-btn').click(function () {\n $('.Extend').toggleClass('hide-sm');\n });\n });\n</script>\n<div class=\"Header position-sticky top-0 topbar\">\n <div class=\"flex-1\">\n <div class=\"d-flex\">\n <div class=\"Header-item\">\n <button id=\"expansion-btn\" class=\"btn-octicon mr-2 d-sm-none\"><span class=\"octicon octicon-three-bars-16\"></span></button>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-link h1 f4 d-flex flex-items-center\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </a>\n </div>\n <a href=\"/jekyll-theme-profile/\" class=\"Header-item Header-link Header-item--full\">Jekyll Theme Profile</a>\n <div class=\"Header-item\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Header-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"Header-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"Header-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n <div class=\"d-flex\">\n <div class=\"Extend Header-item flex-column flex-sm-row flex-items-center width-full hide-sm\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a topbar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the topbar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" class=\"cover-image rounded-2\" alt=\"This is a topbar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">George P. Burdell</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+topbar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html;t=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-topbar.html%2F&title=This+is+a+topbar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/topbar\">topbar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" width=\"377\" height=\"200\" alt=\"This is a stacked post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-stacked.html\">This is a stacked post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the stacked style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-header-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Header Colors\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2025/02/02/custom-header.html\">Introducing Custom Header Colors</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Take control of your post headers with custom colors and images</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Feb 02, 2025</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a stacked post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a stacked post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the stacked style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the stacked style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" />\n<meta property=\"twitter:title\" content=\"This is a stacked post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the stacked style.\",\"headline\":\"This is a stacked post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-stacked.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"Profile text-center mt-3\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 256px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n</div>\n<div class=\"Header d-flex z-2 position-sticky top-0 topbar\">\n <div class=\"Header-item flex-row flex-justify-center flex-1 hide-sm\">\n \n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-1 flex-sm-grow-0 flex-justify-start\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n </div>\n</div>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a stacked post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the stacked style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/05/1200.630-Community-wLogo-e1698634509856.png\" class=\"cover-image rounded-2\" alt=\"This is a stacked post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+stacked+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html;t=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-stacked.html%2F&title=This+is+a+stacked+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/stacked\">stacked</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a appbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/11/10/post-appbar.html\">This is a appbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the appbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 10, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" width=\"377\" height=\"200\" alt=\"This is a sidebar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\">This is a sidebar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the sidebar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>This is a sidebar post style | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"This is a sidebar post style\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a post with the sidebar style.\" />\n<meta property=\"og:description\" content=\"This is an example of a post with the sidebar style.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2023-07-16T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" />\n<meta property=\"twitter:title\" content=\"This is a sidebar post style\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2023-07-16T00:00:00+00:00\",\"datePublished\":\"2023-07-16T00:00:00+00:00\",\"description\":\"This is an example of a post with the sidebar style.\",\"headline\":\"This is a sidebar post style\",\"image\":\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/style/2023/07/16/post-sidebar.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n <div class=\"d-lg-flex flex-1\">\n <script>\n $(document).ready(function () {\n $('#toolbar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n })\n $('#sidebar-btn').click(function () {\n $('.Sidebar').toggleClass('d-lg-block');\n $('.Toolbar-expand').toggleClass('d-lg-block');\n $('.Toolbar-collapse').toggleClass('d-lg-block');\n $('.Toolbar').toggleClass('flex-lg-column');\n\n })\n });\n</script>\n<div class=\"Header d-flex border-right flex-items-start p-0 flex-justify-end position-sticky background-fixed top-0\">\n <div class=\"flex-column flex-1 position-sticky top-0\">\n <div class=\"Toolbar topbar d-flex flex-row p-3 flex-lg-justify-end flex-justify-start\">\n <div class=\"Toolbar-expand d-flex flex-justify-center d-none\">\n <button id=\"sidebar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-right-16\"></span></button>\n </div>\n <div class=\"d-flex flex-justify-center d-lg-none\">\n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div class=\"d-flex flex-justify-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n </div>\n <div class=\"Toolbar-collapse d-flex flex-justify-center d-none d-lg-block\">\n <button id=\"toolbar-btn\" class=\"btn-octicon mr-2\"><span class=\"octicon octicon-chevron-left-16\"></span></button>\n </div>\n </div>\n <div class=\"Sidebar d-none d-lg-block Layout Layout-sidebar Layout--sidebar-wide\">\n <div class=\"text-center\">\n <div class=\"px-5 py-2\">\n\n<div class=\"Masthead\">\n <div class=\"CircleBadge\" style=\"width: 128px;\" >\n <a href=\"/jekyll-theme-profile/\">\n <img src=\"/jekyll-theme-profile/assets/img/user-image.jpg\" alt=\"Jekyll Theme Profile\" >\n </a>\n </div>\n\n <h1 class=\"text-center my-3 lh-condensed overflow-wrap-word\">Jekyll Theme Profile</h1>\n \n<div class=\"f4 d-flex flex-items-center flex-justify-center \">\n \n <div class=\"mb-3 d-inline-flex flex-items-baseline\">\n <div class=\"h2 mr-2 v-align-middle\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n </div>\n <a href=\"https://github.com/PrimerPages\">\n @PrimerPages\n </a>\n </div>\n</div>\n\n</div>\n\n </div>\n <div class=\"py-2\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"Header-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n <div class=\"d-flex flex-column\">\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"Header-link\" >\n Appbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"Header-link\" >\n Sidebar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"Header-link\" >\n Stacked\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"Header-link\" >\n Topbar\n </a>\n</div>\n<div class=\"Header-item flex-justify-center f4 p-2\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"Header-link\" >\n Documentation\n </a>\n</div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">This is a sidebar post style</div>\n <p class=\"f4-mktg color-header-default\">This is an example of a post with the sidebar style.</p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"https://github.blog/wp-content/uploads/2023/08/1200x630-AI-Unfurl-DARK-Inverto.png\" class=\"cover-image rounded-2\" alt=\"This is a sidebar post style\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jul 16, 2023\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=This+is+a+sidebar+post+style&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html;t=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fstyle%2F2023%2F07%2F16%2Fpost-sidebar.html%2F&title=This+is+a+sidebar+post+style\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <h1 id=\"welcome-to-the-test-post\">Welcome to the Test Post</h1>\n\n<p>This is a sample post intended to test various styles provided by the theme. It includes headings, paragraphs, lists, code snippets, and more. Everything here is meant to look ordinary while helping you ensure your styles are working as expected.</p>\n\n<h2 id=\"subheading-example\">Subheading Example</h2>\n\n<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and a <a href=\"https://jekyllrb.com/\">link to jekyll</a>. Text should wrap correctly, and spacing should be consistent.</p>\n\n<h3 id=\"another-subheading\">Another Subheading</h3>\n\n<p>Lists are a key part of content. Here’s an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Grapes</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<h4 id=\"inline-elements\">Inline Elements</h4>\n\n<p>Some <code class=\"language-plaintext highlighter-rouge\">inline code</code> for testing, along with <code class=\"language-plaintext highlighter-rouge\">anotherSnippet</code> right here.</p>\n\n<h5 id=\"code-block\">Code Block</h5>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><div</span> <span class=\"na\">class=</span><span class=\"s\">\"example\"</span><span class=\"nt\">></span>\n <span class=\"nt\"><p></span>Hello, world!<span class=\"nt\"></p></span>\n<span class=\"nt\"></div></span>\n</code></pre></div></div>\n\n<h6 id=\"blockquote\">Blockquote</h6>\n\n<blockquote>\n <p>This is a blockquote. It should stand out from the rest of the content.</p>\n</blockquote>\n\n<h2 id=\"tables\">Tables</h2>\n\n<p>Tables should be styled appropriately and should scroll if they are too wide.</p>\n\n<table>\n <thead>\n <tr>\n <th>Product</th>\n <th>Price</th>\n <th>Stock</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>$50</td>\n <td>In stock</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>$150</td>\n <td>Low stock</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>$30</td>\n <td>Out of stock</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"images\">Images</h3>\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<h3 id=\"footnotes\">Footnotes</h3>\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<h2 id=\"final-thoughts\">Final Thoughts</h2>\n\n<p>This post covers common content types.</p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/style\">style</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/sidebar\">sidebar</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#welcome-to-the-test-post\">Welcome to the Test Post</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#subheading-example\">Subheading Example</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#another-subheading\">Another Subheading</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#inline-elements\">Inline Elements</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#code-block\">Code Block</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#blockquote\">Blockquote</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#tables\">Tables</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#images\">Images</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#footnotes\">Footnotes</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#final-thoughts\">Final Thoughts</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/media/custom-background-feature.png\" width=\"377\" height=\"200\" alt=\"Introducing Custom Backgrounds\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/news/2024/11/20/custom-background.html\">Introducing Custom Backgrounds</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">Customize the theme with your own style by setting a custom background color, image, and overlays.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 20, 2024</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">\n <img class=\"rounded-2\" src=\"https://github.blog/wp-content/uploads/2023/10/hero-light.jpg\" width=\"377\" height=\"200\" alt=\"This is a topbar post style\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/style/2023/07/16/post-topbar.html\">This is a topbar post style</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an example of a post with the topbar style.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"mr-3 mr-12px mt-1 f5-mktg text-bold\">George P. Burdell</span>\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jul 16, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test short post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test short post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<meta property=\"og:description\" content=\"This is a short post. It should show up on the timeline without a “continue” option.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-30T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test short post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-30T00:00:00+00:00\",\"datePublished\":\"2019-01-30T00:00:00+00:00\",\"description\":\"This is a short post. It should show up on the timeline without a “continue” option.\",\"headline\":\"Test short post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/30/short-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test short post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test short post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 30, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+short+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html;t=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F30%2Fshort-post.html%2F&title=Test+short+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Syntax highlighter\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\">Syntax highlighter</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>Below are some languages and their representative styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Welcome to Jekyll!\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Welcome to Jekyll!</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Test post | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Test post\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"This is an example of a basic post with various styles.\" />\n<meta property=\"og:description\" content=\"This is an example of a basic post with various styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Test post\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"This is an example of a basic post with various styles.\",\"headline\":\"Test post\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/test-post.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Test post</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Test post\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Test+post&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html;t=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Ftest-post.html%2F&title=Test+post\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>This is an example of a basic post with various styles.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>.</p>\n\n<p><a href=\"/jekyll-theme-profile/examples/2019/01/29/hello-world.html\">Link to another post</a>.</p>\n\n<p>There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.</p>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header.</p>\n\n <p>When something is important enough, you do it even if the odds are not in your favor.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<div class=\"language-js highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\">// Javascript code with syntax highlighting.</span>\n<span class=\"kd\">var</span> <span class=\"nx\">fun</span> <span class=\"o\">=</span> <span class=\"kd\">function</span> <span class=\"nf\">lang</span><span class=\"p\">(</span><span class=\"nx\">l</span><span class=\"p\">)</span> <span class=\"p\">{</span>\n <span class=\"nx\">dateformat</span><span class=\"p\">.</span><span class=\"nx\">i18n</span> <span class=\"o\">=</span> <span class=\"nf\">require</span><span class=\"p\">(</span><span class=\"dl\">'</span><span class=\"s1\">./lang/</span><span class=\"dl\">'</span> <span class=\"o\">+</span> <span class=\"nx\">l</span><span class=\"p\">)</span>\n <span class=\"k\">return</span> <span class=\"kc\">true</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Ruby code with syntax highlighting</span>\n<span class=\"no\">GitHubPages</span><span class=\"o\">::</span><span class=\"no\">Dependencies</span><span class=\"p\">.</span><span class=\"nf\">gems</span><span class=\"p\">.</span><span class=\"nf\">each</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"n\">version</span><span class=\"o\">|</span>\n <span class=\"n\">s</span><span class=\"p\">.</span><span class=\"nf\">add_dependency</span><span class=\"p\">(</span><span class=\"n\">gem</span><span class=\"p\">,</span> <span class=\"s2\">\"= </span><span class=\"si\">#{</span><span class=\"n\">version</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">)</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<h6 id=\"header-6-1\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th style=\"text-align: left\">head1</th>\n <th style=\"text-align: left\">head two</th>\n <th style=\"text-align: left\">three</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good swedish fish</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">out of stock</td>\n <td style=\"text-align: left\">good and plenty</td>\n <td style=\"text-align: left\">nice</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good cookies</td>\n <td style=\"text-align: left\">good</td>\n </tr>\n <tr>\n <td style=\"text-align: left\">ok</td>\n <td style=\"text-align: left\">good licorice</td>\n <td style=\"text-align: left\">yum</td>\n </tr>\n </tbody>\n</table>\n\n<h3 id=\"theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</h3>\n\n<hr />\n\n<h3 id=\"here-is-an-unordered-list\">Here is an unordered list:</h3>\n\n<ul>\n <li>Item foo</li>\n <li>Item bar</li>\n <li>Item baz</li>\n <li>Item zip</li>\n</ul>\n\n<h3 id=\"and-an-ordered-list\">And an ordered list:</h3>\n\n<ol>\n <li>Item one</li>\n <li>Item two</li>\n <li>Item three</li>\n <li>Item four</li>\n</ol>\n\n<h3 id=\"and-a-nested-list\">And a nested list:</h3>\n\n<ul>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item\n <ul>\n <li>level 3 item</li>\n <li>level 3 item</li>\n </ul>\n </li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item\n <ul>\n <li>level 2 item</li>\n <li>level 2 item</li>\n </ul>\n </li>\n <li>level 1 item</li>\n</ul>\n\n<h3 id=\"small-image\">Small image</h3>\n\n<p><img src=\"https://github.githubassets.com/images/icons/emoji/octocat.png\" alt=\"Octocat\" /></p>\n\n<h3 id=\"large-image\">Large image</h3>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Branching\" /></p>\n\n<h3 id=\"definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</h3>\n\n<dl>\n<dt>Name</dt>\n<dd>Godzilla</dd>\n<dt>Born</dt>\n<dd>1952</dd>\n<dt>Birthplace</dt>\n<dd>Japan</dd>\n<dt>Color</dt>\n<dd>Green</dd>\n</dl>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.\n</code></pre></div></div>\n\n<div class=\"language-plaintext highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code>The final element.\n</code></pre></div></div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/test\">test</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6-1\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h3\"><a href=\"#theres-a-horizontal-rule-below-this\">There’s a horizontal rule below this.</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#here-is-an-unordered-list\">Here is an unordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-an-ordered-list\">And an ordered list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#and-a-nested-list\">And a nested list:</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#small-image\">Small image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#large-image\">Large image</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#definition-lists-can-be-used-with-html-syntax\">Definition lists can be used with HTML syntax.</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Syntax highlighter | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Syntax highlighter\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Below are some languages and their representative styles.\" />\n<meta property=\"og:description\" content=\"Below are some languages and their representative styles.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Syntax highlighter\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"Below are some languages and their representative styles.\",\"headline\":\"Syntax highlighter\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/syntax-highlighter.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Syntax highlighter</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Syntax highlighter\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Syntax+highlighter&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html;t=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fsyntax-highlighter.html%2F&title=Syntax+highlighter\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>Below are some languages and their representative styles.</p>\n\n<h2 id=\"ruby\">Ruby</h2>\n\n<div class=\"language-ruby highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">def</span> <span class=\"nf\">show</span>\n <span class=\"nb\">puts</span> <span class=\"s2\">\"Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line\"</span>\n <span class=\"vi\">@widget</span> <span class=\"o\">=</span> <span class=\"no\">Widget</span><span class=\"p\">(</span><span class=\"n\">params</span><span class=\"p\">[</span><span class=\"ss\">:id</span><span class=\"p\">])</span>\n <span class=\"n\">respond_to</span> <span class=\"k\">do</span> <span class=\"o\">|</span><span class=\"nb\">format</span><span class=\"o\">|</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">html</span> <span class=\"c1\"># show.html.erb</span>\n <span class=\"nb\">format</span><span class=\"p\">.</span><span class=\"nf\">json</span> <span class=\"p\">{</span> <span class=\"n\">render</span> <span class=\"ss\">json: </span><span class=\"vi\">@widget</span> <span class=\"p\">}</span>\n <span class=\"k\">end</span>\n<span class=\"k\">end</span>\n</code></pre></div></div>\n\n<h2 id=\"php\">Php</h2>\n\n<div class=\"language-php highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\"><?php</span>\n <span class=\"k\">print</span><span class=\"p\">(</span><span class=\"s2\">\"Hello </span><span class=\"si\">{</span><span class=\"nv\">$world</span><span class=\"si\">}</span><span class=\"s2\">\"</span><span class=\"p\">);</span>\n<span class=\"cp\">?></span>\n</code></pre></div></div>\n\n<h2 id=\"java\">Java</h2>\n\n<div class=\"language-java highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kd\">public</span> <span class=\"kd\">class</span> <span class=\"nc\">java</span> <span class=\"o\">{</span>\n <span class=\"kd\">public</span> <span class=\"kd\">static</span> <span class=\"kt\">void</span> <span class=\"nf\">main</span><span class=\"o\">(</span><span class=\"nc\">String</span><span class=\"o\">[]</span> <span class=\"n\">args</span><span class=\"o\">)</span> <span class=\"o\">{</span>\n <span class=\"nc\">System</span><span class=\"o\">.</span><span class=\"na\">out</span><span class=\"o\">.</span><span class=\"na\">println</span><span class=\"o\">(</span><span class=\"s\">\"Hello World\"</span><span class=\"o\">);</span>\n <span class=\"o\">}</span>\n<span class=\"o\">}</span>\n</code></pre></div></div>\n\n<h3 id=\"html\">HTML</h3>\n\n<div class=\"language-html highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\"><html></span>\n <span class=\"nt\"><head><title></span>Title!<span class=\"nt\"></title></head></span>\n <span class=\"nt\"><body></span>\n <span class=\"nt\"><p</span> <span class=\"na\">id=</span><span class=\"s\">\"foo\"</span><span class=\"nt\">></span>Hello, World!<span class=\"nt\"></p></span>\n <span class=\"nt\"><script </span><span class=\"na\">type=</span><span class=\"s\">\"text/javascript\"</span><span class=\"nt\">></span><span class=\"kd\">var</span> <span class=\"nx\">a</span> <span class=\"o\">=</span> <span class=\"mi\">1</span><span class=\"p\">;</span><span class=\"nt\"></script></span>\n <span class=\"nt\"><style </span><span class=\"na\">type=</span><span class=\"s\">\"text/css\"</span><span class=\"nt\">></span><span class=\"nf\">#foo</span> <span class=\"p\">{</span> <span class=\"nl\">font-weight</span><span class=\"p\">:</span> <span class=\"nb\">bold</span><span class=\"p\">;</span> <span class=\"p\">}</span><span class=\"nt\"></style></span>\n <span class=\"nt\"></body></span>\n<span class=\"nt\"></html></span>\n</code></pre></div></div>\n\n<h2 id=\"console\">Console</h2>\n\n<div class=\"language-console highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"gp\">#</span><span class=\"w\"> </span>prints <span class=\"s2\">\"hello, world\"</span> to the screen\n<span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"nb\">echo </span>Hello, World\n<span class=\"go\">Hello, World\n\n</span><span class=\"gp\">#</span><span class=\"w\"> </span>don<span class=\"s1\">'t run this\n</span><span class=\"gp\">~#</span><span class=\"w\"> </span><span class=\"s1\">rm -rf --no-preserve-root /\n</span></code></pre></div></div>\n\n<h2 id=\"css\">Css</h2>\n\n<div class=\"language-css highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n <span class=\"nl\">font-size</span><span class=\"p\">:</span> <span class=\"m\">12pt</span><span class=\"p\">;</span>\n <span class=\"nl\">background</span><span class=\"p\">:</span> <span class=\"nx\">#fff</span> <span class=\"nf\">url</span><span class=\"p\">(</span><span class=\"n\">temp</span><span class=\"p\">.</span><span class=\"n\">png</span><span class=\"p\">)</span> <span class=\"nb\">top</span> <span class=\"nb\">left</span> <span class=\"nb\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"yaml\">Yaml</h2>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">one</span><span class=\"pi\">:</span> <span class=\"s\">Apple</span>\n<span class=\"na\">two</span><span class=\"pi\">:</span> <span class=\"s\">Banana</span>\n<span class=\"na\">three</span><span class=\"pi\">:</span> <span class=\"s\">Cherry</span>\n</code></pre></div></div>\n\n<h2 id=\"c\">C++</h2>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span>\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"c1\">// Outputs Hello World to screen.</span>\n <span class=\"n\">std</span><span class=\"o\">::</span><span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></div></div>\n\n<h2 id=\"python\">Python</h2>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"kn\">import</span> <span class=\"n\">sys</span>\n\n<span class=\"k\">def</span> <span class=\"nf\">my_function</span><span class=\"p\">():</span>\n <span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">Hello from a function</span><span class=\"sh\">\"</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<h2 id=\"using-liquid\">Using liquid</h2>\n\n<h3 id=\"without-line-numbers\">Without line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span></code></pre></figure>\n\n<h3 id=\"with-line-numbers\">With line numbers</h3>\n\n<figure class=\"highlight\"><pre><code class=\"language-javascript\" data-lang=\"javascript\"><table class=\"rouge-table\"><tbody><tr><td class=\"gutter gl\"><pre class=\"lineno\">1\n2\n</pre></td><td class=\"code\"><pre><span class=\"kd\">function</span> <span class=\"nf\">some</span><span class=\"p\">(</span><span class=\"nx\">code</span><span class=\"p\">)</span> <span class=\"p\">{</span> <span class=\"cm\">/*goes here*/</span> <span class=\"p\">}</span>\n<span class=\"kd\">let</span> <span class=\"nx\">x</span> <span class=\"o\">=</span> <span class=\"mi\">21</span><span class=\"p\">;</span>\n</pre></td></tr></tbody></table></code></pre></figure>\n\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/example\">example</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#ruby\">Ruby</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#php\">Php</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#java\">Java</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#html\">HTML</a></li>\n</ul>\n</li>\n<li class=\"toc-entry toc-h2\"><a href=\"#console\">Console</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#css\">Css</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#yaml\">Yaml</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#c\">C++</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#python\">Python</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#using-liquid\">Using liquid</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#without-line-numbers\">Without line numbers</a></li>\n<li class=\"toc-entry toc-h3\"><a href=\"#with-line-numbers\">With line numbers</a></li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/29/test-post.html\">Test post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is an example of a basic post with various styles.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 29, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Welcome to Jekyll! | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Welcome to Jekyll!\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<meta property=\"og:description\" content=\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2019-01-29T00:00:00+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Welcome to Jekyll!\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2019-01-29T00:00:00+00:00\",\"datePublished\":\"2019-01-29T00:00:00+00:00\",\"description\":\"You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.\",\"headline\":\"Welcome to Jekyll!\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/examples/2019/01/29/hello-world.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" >\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n<div class=\"Blog flex-column flex-1 min-width-0\">\n <div class=\"BlogHeader position-relative border-top\">\n <div class=\"container-xl p-responsive\">\n <div class=\"col-12 offset-lg-1 col-lg-10 col-xl-7 mt-5 mt-lg-10 mb-6 mb-lg-8\">\n <div class=\"h3-mktg lh-condensed mb-3 color-header-default\">Welcome to Jekyll!</div>\n <p class=\"f4-mktg color-header-default\"></p>\n </div>\n <div class=\"offset-lg-1 col-lg-10\">\n <div class=\"position-relative z-1\">\n <div class=\"image-container\">\n <img src=\"/jekyll-theme-profile/assets/img/default.png\" class=\"cover-image rounded-2\" alt=\"Welcome to Jekyll!\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"Blog position-absolute bottom-0 width-full border-top\" style=\"height:88px\">\n </div>\n </div>\n <div class=\"pb-5\">\n <div class=\"container-xl mx-auto p-responsive\">\n <!-- Post metadata -->\n <div class=\"pt-5\">\n <div class=\"col-12 offset-lg-1 col-lg-10\">\n <div class=\"text-mono f5-mktg color-fg-muted mb-12px\">Author</div>\n <div class=\"d-flex flex-nowrap pb-1 flex-items-start\">\n <div class=\"d-flex flex-wrap\">PrimerPages</div>\n <div\n class=\"d-block border-left flex-shrink-0 text-mono f5-mktg color-fg-muted mb-3 ml-auto pl-5\">\n Jan 29, 2019\n </div>\n </div>\n <div class=\"color-border-accent-emphasis border-bottom\"></div>\n </div>\n </div>\n <div class=\"mx-auto p-responsive pt-4 pt-md-7 pb-7 pb-md-9\">\n <div class=\"d-flex flex-wrap\">\n <div class=\"col-12 offset-lg-1 col-lg-1\">\n <ul class=\"list-style-none d-flex flex-lg-column position-sticky top-12\">\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://x.com/share?text=Welcome+to+Jekyll%21&url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 1200 1227\" fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html;t=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.3 15.4\" height=\"18\">\n <path\n d=\"M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n <li class=\"mr-4 mr-lg-0 mb-4\">\n <a href=\"https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fprimerpages.github.io%2Fjekyll-theme-profile%2Fexamples%2F2019%2F01%2F29%2Fhello-world.html%2F&title=Welcome+to+Jekyll%21\"\n target=\"_blank\"\n class=\"d-flex flex-justify-center flex-items-center border circle social-aside\"\n data-proofer-ignore>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 19 18\" height=\"18\">\n <path\n d=\"M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z\"\n fill=\"currentColor\"></path>\n </svg>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"col-12 col-lg-7 col-md-8 markdown-body\">\n \n <p>You’ll find this post in your <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class=\"language-plaintext highlighter-rouge\">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>\n\n<p>To add new posts, simply add a file in the <code class=\"language-plaintext highlighter-rouge\">_posts</code> directory that follows the convention <code class=\"language-plaintext highlighter-rouge\">YYYY-MM-DD-name-of-post.ext</code> and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.</p>\n\n<p>Check out the <a href=\"https://jekyllrb.com/docs/home\">Jekyll docs</a> for more info on how to get the most out of Jekyll. File all bugs/feature requests at <a href=\"https://github.com/jekyll/jekyll\">Jekyll’s GitHub repo</a>. If you have questions, you can ask them on <a href=\"https://talk.jekyllrb.com/\">Jekyll Talk</a>.</p>\n\n<p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href=\"https://github.com\">Links</a> should be blue with no underlines (unless hovered over).</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>\n\n<blockquote>\n <p>There should be no margin above this first sentence.\nBlockquotes should be a lighter gray with a gray border along the left side.\nThere should be no margin below this final sentence.</p>\n</blockquote>\n\n<h1 id=\"header-1\">Header 1</h1>\n\n<p>This is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n\n<h2 id=\"header-2\">Header 2</h2>\n\n<blockquote>\n <p>This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.</p>\n</blockquote>\n\n<h3 id=\"header-3\">Header 3</h3>\n\n<h4 id=\"header-4\">Header 4</h4>\n\n<ul>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n <li>This is an unordered list following a header.</li>\n</ul>\n\n<h5 id=\"header-5\">Header 5</h5>\n\n<ol>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n <li>This is an ordered list following a header.</li>\n</ol>\n\n<h6 id=\"header-6\">Header 6</h6>\n\n<table>\n <thead>\n <tr>\n <th>What</th>\n <th>Follows</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n <tr>\n <td>A table</td>\n <td>A header</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>There’s a horizontal rule above and below this.</p>\n\n<hr />\n\n<p>Here is an unordered list:</p>\n\n<ul>\n <li>Apples</li>\n <li>Bananas</li>\n <li>Carrots</li>\n</ul>\n\n<p>And an ordered list:</p>\n\n<ol>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ol>\n\n<p>And an unordered task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Create a sample markdown document</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Add task lists to it</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" />Take a vacation</li>\n</ul>\n\n<p>And a “mixed” task list:</p>\n\n<ul class=\"task-list\">\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Steal underpants</li>\n <li class=\"task-list-item\">[ ]</li>\n <li class=\"task-list-item\"><input type=\"checkbox\" class=\"task-list-item-checkbox\" disabled=\"disabled\" checked=\"checked\" />Profit!</li>\n</ul>\n\n<p>And a nested list:</p>\n\n<ul>\n <li>Fruits\n <ul>\n <li>Apple</li>\n <li>Banana</li>\n <li>Cherry</li>\n <li>Grape</li>\n <li>Orange</li>\n </ul>\n </li>\n <li>Tools\n <ul>\n <li>Hammer</li>\n <li>Screwdriver</li>\n <li>Wrench</li>\n <li>Pliers</li>\n </ul>\n </li>\n</ul>\n\n<p>Definition lists can be used with HTML syntax. Definition terms are <strong>bold and italic</strong>.</p>\n\n<dl>\n <dt>Name</dt>\n <dd>Godzilla</dd>\n <dt>Born</dt>\n <dd>1952</dd>\n <dt>Birthplace</dt>\n <dd>Japan</dd>\n <dt>Color</dt>\n <dd>Green</dd>\n</dl>\n\n<hr />\n\n<p>Tables should have bold headings and alternating shaded rows.</p>\n\n<table>\n <thead>\n <tr>\n <th>Artist</th>\n <th>Album</th>\n <th>Year</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>David Bowie</td>\n <td>Scary Monsters</td>\n <td>1980</td>\n </tr>\n <tr>\n <td>Prince</td>\n <td>Purple Rain</td>\n <td>1982</td>\n </tr>\n <tr>\n <td>Beastie Boys</td>\n <td>License to Ill</td>\n <td>1986</td>\n </tr>\n <tr>\n <td>Janet Jackson</td>\n <td>Rhythm Nation 1814</td>\n <td>1989</td>\n </tr>\n </tbody>\n</table>\n\n<p>If a table is too wide, it should condense down and/or scroll horizontally.</p>\n\n<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Description</th>\n <th>Color</th>\n <th>Size</th>\n <th>Material</th>\n <th>Weight</th>\n <th>Price</th>\n <th>Rating</th>\n <th>Stock</th>\n <th>Notes</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Chair</td>\n <td>Office chair</td>\n <td>Black</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>12kg</td>\n <td>$120</td>\n <td>4.5</td>\n <td>Yes</td>\n <td>Adjustable height</td>\n </tr>\n <tr>\n <td>Table</td>\n <td>Dining table</td>\n <td>Brown</td>\n <td>Large</td>\n <td>Wood</td>\n <td>30kg</td>\n <td>$450</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Seats six</td>\n </tr>\n <tr>\n <td>Lamp</td>\n <td>Desk lamp</td>\n <td>White</td>\n <td>Small</td>\n <td>Metal</td>\n <td>2kg</td>\n <td>$35</td>\n <td>4.2</td>\n <td>No</td>\n <td>LED light included</td>\n </tr>\n <tr>\n <td>Sofa</td>\n <td>Living room sofa</td>\n <td>Gray</td>\n <td>Large</td>\n <td>Fabric</td>\n <td>45kg</td>\n <td>$780</td>\n <td>4.8</td>\n <td>Yes</td>\n <td>Three seats</td>\n </tr>\n <tr>\n <td>Shelf</td>\n <td>Wall shelf</td>\n <td>Oak</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>8kg</td>\n <td>$60</td>\n <td>4.6</td>\n <td>Yes</td>\n <td>Easy to install</td>\n </tr>\n <tr>\n <td>Bed</td>\n <td>Queen bed frame</td>\n <td>Black</td>\n <td>Large</td>\n <td>Metal</td>\n <td>40kg</td>\n <td>$550</td>\n <td>4.9</td>\n <td>Yes</td>\n <td>Mattress not included</td>\n </tr>\n <tr>\n <td>Mirror</td>\n <td>Wall mirror</td>\n <td>Silver</td>\n <td>Medium</td>\n <td>Glass</td>\n <td>5kg</td>\n <td>$90</td>\n <td>4.3</td>\n <td>Yes</td>\n <td>Comes with mounting kit</td>\n </tr>\n <tr>\n <td>Rug</td>\n <td>Area rug</td>\n <td>Beige</td>\n <td>Large</td>\n <td>Wool</td>\n <td>10kg</td>\n <td>$300</td>\n <td>4.4</td>\n <td>No</td>\n <td>Hand-woven</td>\n </tr>\n <tr>\n <td>Cabinet</td>\n <td>Storage cabinet</td>\n <td>White</td>\n <td>Medium</td>\n <td>Wood</td>\n <td>20kg</td>\n <td>$250</td>\n <td>4.7</td>\n <td>Yes</td>\n <td>Multiple compartments</td>\n </tr>\n <tr>\n <td>Fan</td>\n <td>Standing fan</td>\n <td>Gray</td>\n <td>Medium</td>\n <td>Plastic</td>\n <td>4kg</td>\n <td>$80</td>\n <td>4.1</td>\n <td>Yes</td>\n <td>Adjustable speed settings</td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>Code snippets like <code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code> can be shown inline.</p>\n\n<p>Also, <code class=\"language-plaintext highlighter-rouge\">this should vertically align</code> <code>with this</code> <code>and this</code>.</p>\n\n<p>Code can also be shown in a block element.</p>\n\n<p>$ a * b = c ^ b $</p>\n\n<p>$ 2^{\\frac{n-1}{3}} $</p>\n\n<p>$ \\int_a^b f(x)\\,dx. $</p>\n\n<div class=\"language-cpp highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"cp\">#include</span> <span class=\"cpf\"><iostream></span><span class=\"cp\">\n</span><span class=\"k\">using</span> <span class=\"k\">namespace</span> <span class=\"n\">std</span><span class=\"p\">;</span>\n\n<span class=\"kt\">int</span> <span class=\"nf\">main</span><span class=\"p\">()</span> <span class=\"p\">{</span>\n <span class=\"n\">cout</span> <span class=\"o\"><<</span> <span class=\"s\">\"Hello World!\"</span><span class=\"p\">;</span>\n <span class=\"k\">return</span> <span class=\"mi\">0</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n<span class=\"c1\">// prints 'Hi, Tom' to STDOUT.</span>\n</code></pre></div></div>\n\n<div class=\"language-python highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"k\">class</span> <span class=\"nc\">Person</span><span class=\"p\">:</span>\n <span class=\"k\">def</span> <span class=\"nf\">__init__</span><span class=\"p\">(</span><span class=\"n\">self</span><span class=\"p\">,</span> <span class=\"n\">name</span><span class=\"p\">,</span> <span class=\"n\">age</span><span class=\"p\">):</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"n\">name</span>\n <span class=\"n\">self</span><span class=\"p\">.</span><span class=\"n\">age</span> <span class=\"o\">=</span> <span class=\"n\">age</span>\n\n<span class=\"n\">p1</span> <span class=\"o\">=</span> <span class=\"nc\">Person</span><span class=\"p\">(</span><span class=\"sh\">\"</span><span class=\"s\">John</span><span class=\"sh\">\"</span><span class=\"p\">,</span> <span class=\"mi\">36</span><span class=\"p\">)</span>\n\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">name</span><span class=\"p\">)</span>\n<span class=\"nf\">print</span><span class=\"p\">(</span><span class=\"n\">p1</span><span class=\"p\">.</span><span class=\"n\">age</span><span class=\"p\">)</span>\n</code></pre></div></div>\n\n<p>Inline code inside table cells should still be distinguishable.</p>\n\n<table>\n <thead>\n <tr>\n <th>Language</th>\n <th>Code</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>JavasScript</td>\n <td><code class=\"language-plaintext highlighter-rouge\">var foo = \"bar\";</code></td>\n </tr>\n <tr>\n <td>Ruby</td>\n <td><code class=\"language-plaintext highlighter-rouge\">foo = \"bar\"</code></td>\n </tr>\n </tbody>\n</table>\n\n<hr />\n\n<p>The <code class=\"language-plaintext highlighter-rouge\"><samp></code> HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: <code class=\"language-plaintext highlighter-rouge\">File not found</code>.</p>\n\n<hr />\n\n<p>Small images should be shown at their actual size.</p>\n\n<p><img src=\"https://placebear.com/g/300/200\" alt=\"Small Image\" /></p>\n\n<p>Large images should always scale down and fit in the content container.</p>\n\n<p><img src=\"https://placebear.com/g/1200/800\" alt=\"Large Image\" /></p>\n\n<p>Here’s a simple footnote,<sup id=\"fnref:1\"><a href=\"#fn:1\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">1</a></sup> and here’s a longer one.<sup id=\"fnref:2\"><a href=\"#fn:2\" class=\"footnote\" rel=\"footnote\" role=\"doc-noteref\">2</a></sup></p>\n\n<p><code class=\"language-plaintext highlighter-rouge\">This is the final element on the page, and there should be no margin below this.</code></p>\n<div class=\"footnotes\" role=\"doc-endnotes\">\n <ol>\n <li id=\"fn:1\">\n <p>This is the first footnote. <a href=\"#fnref:1\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n <li id=\"fn:2\">\n <p>Here’s one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n <code class=\"language-plaintext highlighter-rouge\">my code</code>\n Add as many paragraphs as you like. <a href=\"#fnref:2\" class=\"reversefootnote\" role=\"doc-backlink\">↩</a></p>\n </li>\n </ol>\n</div>\n\n <div class=\"post-tags text-mono f4-mktg mt-8\">\n <span class=\"post-tags-label flex-shrink-0 d-inline-block mt-2\">Tags: </span>\n <ul class=\"d-inline-block list-style-none color-text-link mb-0\">\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/how-to\">how-to</a></li>\n <li class=\"d-inline-block mt-2 mb-0\"><a href=\"/jekyll-theme-profile/tags/welcome\">welcome</a></li>\n \n </ul>\n </div>\n </div>\n <div class=\"col-12 col-md-4 col-lg-3 markdown-body\">\n <div class=\"d-none d-md-block position-sticky top-12 ml-5\">\n \n \n <div class=\"mb-8 table-of-contents \">\n <h2 class=\"h6-mktg pt-1\">\n Table of Contents\n </h2>\n <div id=\"table-of-contents\">\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h1\"><a href=\"#header-1\">Header 1</a>\n<ul>\n<li class=\"toc-entry toc-h2\"><a href=\"#header-2\">Header 2</a>\n<ul>\n<li class=\"toc-entry toc-h3\"><a href=\"#header-3\">Header 3</a>\n<ul>\n<li class=\"toc-entry toc-h4\"><a href=\"#header-4\">Header 4</a>\n<ul>\n<li class=\"toc-entry toc-h5\"><a href=\"#header-5\">Header 5</a>\n<ul>\n<li class=\"toc-entry toc-h6\"><a href=\"#header-6\">Header 6</a></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"Related container-xl mx-auto p-responsive\">\n \n\n\n\n\n\n\n\n\n\n\n\n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n<h2 class=\"h5-mktg pb-3 mb-lg-3\">Related posts</h2>\n<div class=\"d-flex flex-wrap gutter\">\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">\n <img class=\"rounded-2\" src=\"https://www.allisonthackston.com/assets/img/cover-1920.jpg\" width=\"377\" height=\"200\" alt=\"Empty post with image\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/11/21/empty.html\">Empty post with image</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Nov 21, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Empty post with video\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2023/12/14/video.html\">Empty post with video</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\">This is an empty post. It should show up in the timeline, but not encourage click-through or expansions.</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Dec 14, 2023</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n \n\n \n<!--Post card-->\n<div class=\"col-sm-6 col-lg-4 \">\n <div class=\"py-4 d-flex flex-column \">\n <div class=\"image-container\">\n <a href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">\n <img class=\"rounded-2\" src=\"/jekyll-theme-profile/assets/img/default.png\" width=\"377\" height=\"200\" alt=\"Test short post\">\n </a>\n </div>\n <h3 class=\"h6-mktg mb-12px\">\n <a class=\"Link--primary\" href=\"/jekyll-theme-profile/examples/2019/01/30/short-post.html\">Test short post</a>\n </h3>\n <div class=\"f4-mktg color-fg-muted mb-0\"><p>This is a short post. It should show up on the timeline without a “continue” option.</p>\n</div>\n <div class=\"mt-14px\">\n <div class=\"d-flex flex-items-center\">\n <div class=\"d-flex flex-items-end flex-wrap\">\n <span class=\"d-inline-block f5-mktg text-mono color-fg-muted mt-1\">Jan 30, 2019</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n</div>\n\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n"
],
"html_pages": [
"## Welcome to another page\n\n_yay_\n",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"This is a appbar style page with a custom background and overlay.\n",
"This is a docs layout with a custom background image and overlay.\n",
"This is a sidebar style page with custom background and overlay.\n",
"This is a stacked style page with a custom background and overlay.\n",
"This is a topbar style page with a custom background and overlay.\n",
"This is a custom background and overlay\n",
"This is a landing page with a custom header color.\n",
"This is a sidebar style page with a custom header color\n",
"This is a stacked page with a custom header color\n",
"This is a topbar style page with a custom header color\n",
"This is a landing layout with a custom header image.\n",
"This is a sidebar style page with a custom header image.\n",
"This is a stacked style page with a custom header image.\n",
"This is a topbar style page with a custom header image.\n",
"",
"",
"",
"",
"# Welcome to jekyll-theme-profile theme!\n\nThis theme is based on GitHub's primer style. It supports both light and dark modes, and four style options: \n\n- [appbar](/jekyll-theme-profile/appbar.html)\n- [sidebar](/jekyll-theme-profile/sidebar.html)\n- [topbar](/jekyll-theme-profile/topbar.html)\n- [stacked](/jekyll-theme-profile/stacked.html)\n\nSetting up is a breeze, as it automatically populates your profile using your GitHub user info. Add custom links like Linktree and share engaging blog posts effortlessly.\n",
"",
"",
"",
"",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"",
"Text can be **bold**, *italic*, or ~~strikethrough~~. [Links](https://github.com) should be blue with no underlines (unless hovered over).\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\nThere should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.\n\n> There should be no margin above this first sentence.\n> Blockquotes should be a lighter gray with a gray border along the left side.\n> There should be no margin below this final sentence.\n\n# Header 1\n\nThis is a standard paragraph designed for testing purposes. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n\n## Header 2\n\n> This is a blockquote following a header. Sample text flows here to simulate real content. Widgets, gadgets, and tools align perfectly with lorem bits and placeholder pieces. Testing the rhythm of prose, we sprinkle in arbitrary nouns like keyboard, coffee mug, and paperclip. The goal is simple: evaluate formatting without getting too distracted by meaning.\n\n### Header 3\n\n#### Header 4\n\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n- This is an unordered list following a header.\n\n##### Header 5\n\n1. This is an ordered list following a header.\n2. This is an ordered list following a header.\n3. This is an ordered list following a header.\n\n###### Header 6\n\n| What | Follows |\n|------------|------------|\n| A table | A header |\n| A table | A header |\n| A table | A header |\n\n---\n\nThere's a horizontal rule above and below this.\n\n---\n\nHere is an unordered list:\n\n- Apples\n- Bananas\n- Carrots\n\nAnd an ordered list:\n\n1. First item\n2. Second item\n3. Third item\n\nAnd an unordered task list:\n\n- [x] Create a sample markdown document\n- [ ] Add task lists to it\n- [ ] Take a vacation\n\nAnd a \"mixed\" task list:\n\n- [x] Steal underpants\n- [ ]\n- [x] Profit!\n\nAnd a nested list:\n\n- Fruits\n - Apple\n - Banana\n - Cherry\n - Grape\n - Orange\n- Tools\n - Hammer\n - Screwdriver\n - Wrench\n - Pliers\n\n\nDefinition lists can be used with HTML syntax. Definition terms are **bold and italic**.\n\nName\n: Godzilla\n\nBorn\n: 1952\n\nBirthplace\n: Japan\n\nColor\n: Green\n\n---\n\nTables should have bold headings and alternating shaded rows.\n\n| Artist | Album | Year |\n|---------------|----------------------|------|\n| David Bowie | Scary Monsters | 1980 |\n| Prince | Purple Rain | 1982 |\n| Beastie Boys | License to Ill | 1986 |\n| Janet Jackson | Rhythm Nation 1814 | 1989 |\n\nIf a table is too wide, it should condense down and/or scroll horizontally.\n\n| Item | Description | Color | Size | Material | Weight | Price | Rating | Stock | Notes |\n|--------------|------------------|-----------|---------|-----------|--------|--------|--------|-------|-------------------------------|\n| Chair | Office chair | Black | Medium | Wood | 12kg | $120 | 4.5 | Yes | Adjustable height |\n| Table | Dining table | Brown | Large | Wood | 30kg | $450 | 4.7 | Yes | Seats six |\n| Lamp | Desk lamp | White | Small | Metal | 2kg | $35 | 4.2 | No | LED light included |\n| Sofa | Living room sofa | Gray | Large | Fabric | 45kg | $780 | 4.8 | Yes | Three seats |\n| Shelf | Wall shelf | Oak | Medium | Wood | 8kg | $60 | 4.6 | Yes | Easy to install |\n| Bed | Queen bed frame | Black | Large | Metal | 40kg | $550 | 4.9 | Yes | Mattress not included |\n| Mirror | Wall mirror | Silver | Medium | Glass | 5kg | $90 | 4.3 | Yes | Comes with mounting kit |\n| Rug | Area rug | Beige | Large | Wool | 10kg | $300 | 4.4 | No | Hand-woven |\n| Cabinet | Storage cabinet | White | Medium | Wood | 20kg | $250 | 4.7 | Yes | Multiple compartments |\n| Fan | Standing fan | Gray | Medium | Plastic | 4kg | $80 | 4.1 | Yes | Adjustable speed settings |\n\n\n---\n\nCode snippets like `var foo = \"bar\";` can be shown inline.\n\nAlso, `this should vertically align` <code>with this</code> <code>and this</code>.\n\nCode can also be shown in a block element.\n\n\n$ a \\* b = c ^ b $\n\n$ 2^{\\frac{n-1}{3}} $\n\n$ \\int_a^b f(x)\\,dx. $\n\n```cpp\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << \"Hello World!\";\n return 0;\n}\n// prints 'Hi, Tom' to STDOUT.\n```\n\n```python\nclass Person:\n def __init__(self, name, age):\n self.name = name\n self.age = age\n\np1 = Person(\"John\", 36)\n\nprint(p1.name)\nprint(p1.age)\n```\n\nInline code inside table cells should still be distinguishable.\n\n| Language | Code |\n|-------------|-------------------|\n| JavasScript | `var foo = \"bar\";`|\n| Ruby | `foo = \"bar\"` |\n\n---\n\nThe `<samp>` HTML element is used to enclose inline text that represents sample (or quoted) output from a computer program. Here an example of an error message: `File not found`.\n\n---\n\nSmall images should be shown at their actual size.\n\n\n\nLarge images should always scale down and fit in the content container.\n\n\n\nHere's a simple footnote,[^1] and here's a longer one.[^2]\n\n[^1]: This is the first footnote.\n\n[^2]: Here's one with multiple paragraphs and code.\n Indent paragraphs to include them in the footnote.\n `my code`\n Add as many paragraphs as you like.\n\n`This is the final element on the page, and there should be no margin below this.`\n",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
"{% if page.paginator %}\n <!-- Pagination is active -->\n {% assign paginator = page.paginator %}\n{% endif %}\n{% assign posts = paginator.posts | default: page.posts %}\n{% assign limit = paginator.per_page | default: -1 %}\n{% if limit < 0 %}\n{% assign limit = posts.size %}\n{% endif %}\n\n<div class=\"d-flex flex-wrap gutter border-top\">\n <!-- Show post excerpts for the current page -->\n {% for post in posts limit: limit %}\n {%- if post.feature or post == site.categories[page.category][0] %}\n {%- include post-feature-card.html %}\n {%- else %}\n {%- include post-card.html border=\"border-top\" %}\n {%- endif %}\n {% endfor %}\n</div>\n\n<!-- Show navigation next/previous page links if applicable -->\n {% if paginator %}\n<!-- Pagination links -->\n {% capture previous_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.previous_page_path }}{% endcapture %}\n {% capture next_page_path %}{{ site.category_path }}/{{ page.category }}/{{ paginator.next_page_path }}{% endcapture %}\n {% capture paginate_path %}{{ site.category_path }}/{{ page.category }}/page:num{% endcapture %}\n {% include paginator_nav.html previous_page_path=previous_page_path next_page_path=next_page_path paginate_path=paginate_path %}\n{% endif %}\n",
""
],
"theme": "jekyll-theme-profile",
"title": "Jekyll Theme Profile",
"description": "Theme built with jekyll-theme-profile",
"repository": "PrimerPages/jekyll-theme-profile",
"style": "appbar",
"dark_theme": "dark_dimmed",
"light_theme": "light",
"repo_info": true,
"user_metadata": true,
"profile_link": true,
"repositories": {
"sort_by": "stars",
"limit": 24,
"exclude": {
"archived": true,
"forks": true,
"repositories": null
}
},
"related_by": "tags or categories",
"source": "demo",
"destination": "/home/runner/work/jekyll-theme-profile/jekyll-theme-profile/_site",
"collections_dir": "",
"cache_dir": ".jekyll-cache",
"plugins_dir": "_plugins",
"layouts_dir": "_layouts",
"data_dir": "_data",
"includes_dir": "_includes",
"safe": false,
"include": [
".htaccess"
],
"exclude": [
".sass-cache",
".jekyll-cache",
"gemfiles",
"Gemfile",
"Gemfile.lock",
"node_modules",
"vendor/bundle/",
"vendor/cache/",
"vendor/gems/",
"vendor/ruby/"
],
"keep_files": [
".git",
".svn"
],
"encoding": "utf-8",
"markdown_ext": "markdown,mkdown,mkdn,mkd,md",
"strict_front_matter": false,
"show_drafts": null,
"limit_posts": 0,
"future": false,
"unpublished": false,
"whitelist": [],
"plugins": [
"jekyll-github-metadata",
"jekyll-octicons",
"jekyll-relative-links",
"jekyll-seo-tag",
"jekyll-toc",
"jemoji",
"jekyll-meta"
],
"markdown": "kramdown",
"highlighter": "rouge",
"lsi": false,
"excerpt_separator": "\n\n",
"incremental": false,
"detach": false,
"port": "4000",
"host": "127.0.0.1",
"baseurl": "/jekyll-theme-profile",
"show_dir_listing": false,
"permalink": "date",
"paginate_path": "/blog/page:num",
"timezone": null,
"quiet": false,
"verbose": false,
"defaults": [
{
"scope": {
"path": "",
"type": "posts"
},
"values": {
"layout": "post",
"image": "/assets/img/default.png",
"toc": true
}
},
{
"scope": {
"path": "",
"type": "docs"
},
"values": {
"layout": "docs",
"image": "/assets/img/default.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true
}
}
],
"liquid": {
"error_mode": "warn",
"strict_filters": false,
"strict_variables": false
},
"kramdown": {
"auto_ids": true,
"toc_levels": [
1,
2,
3,
4,
5,
6
],
"entity_output": "as_char",
"smart_quotes": "lsquo,rsquo,ldquo,rdquo",
"input": "GFM",
"hard_wrap": false,
"guess_lang": true,
"footnote_nr": 1,
"show_warnings": false,
"syntax_highlighter": "rouge",
"syntax_highlighter_opts": {
"default_lang": "plaintext",
"guess_lang": true
},
"coderay": {}
},
"image": "/assets/img/social-preview.png",
"user_image": "/assets/img/user-image.jpg",
"favicon": "/media/appbar-icon.png",
"icon_color": "#959da5",
"nav": [
{
"name": "Appbar",
"url": "/appbar.html"
},
{
"name": "Sidebar",
"url": "/sidebar.html"
},
{
"name": "Stacked",
"url": "/stacked.html"
},
{
"name": "Topbar",
"url": "/topbar.html"
},
{
"name": "Documentation",
"url": "/docs"
}
],
"links": [
{
"name": "Example Linktree page",
"url": "/linktree",
"octicon": "link"
},
{
"name": "Example Profile page",
"url": "/profile",
"octicon": "person"
},
{
"name": "Example Repositories page",
"url": "/repositories",
"octicon": "repo"
},
{
"name": "Example landing page",
"url": "/landing",
"octicon": "rocket"
},
{
"name": "Example blog index",
"url": "/blog",
"octicon": "comment"
},
{
"name": "Example category index",
"url": "/category",
"octicon": "stack"
},
{
"name": "Example tag index",
"url": "/tags",
"octicon": "tag"
},
{
"name": "Custom background",
"url": "/custom-background",
"octicon": "device-desktop"
},
{
"name": "Custom header",
"url": "/custom-header",
"octicon": "browser"
}
],
"paginate": 7,
"tag_page_layout": "tags",
"tag_page_dir": "tags",
"category_path": "category",
"category_layout": "category_layout.html",
"relative_links": {
"enabled": true,
"collections": true
},
"serving": false,
"github": {
"api_url": "https://api.github.com",
"archived": false,
"baseurl": "/jekyll-theme-profile",
"build_revision": "d93a33d3adf6f5945aa45d941aa684924b821e07",
"clone_url": "https://github.com/PrimerPages/jekyll-theme-profile.git",
"contributors": [
{
"login": "athackst",
"id": 6098197,
"node_id": "MDQ6VXNlcjYwOTgxOTc=",
"avatar_url": "https://avatars.githubusercontent.com/u/6098197?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/athackst",
"html_url": "https://github.com/athackst",
"followers_url": "https://api.github.com/users/athackst/followers",
"following_url": "https://api.github.com/users/athackst/following{/other_user}",
"gists_url": "https://api.github.com/users/athackst/gists{/gist_id}",
"starred_url": "https://api.github.com/users/athackst/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/athackst/subscriptions",
"organizations_url": "https://api.github.com/users/athackst/orgs",
"repos_url": "https://api.github.com/users/athackst/repos",
"events_url": "https://api.github.com/users/athackst/events{/privacy}",
"received_events_url": "https://api.github.com/users/athackst/received_events",
"type": "User",
"user_view_type": "public",
"site_admin": false,
"contributions": 293
},
{
"login": "dependabot[bot]",
"id": 49699333,
"node_id": "MDM6Qm90NDk2OTkzMzM=",
"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/dependabot%5Bbot%5D",
"html_url": "https://github.com/apps/dependabot",
"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false,
"contributions": 56
}
],
"disabled": false,
"environment": "production",
"help_url": "https://help.github.com",
"hostname": "github.com",
"is_project_page": true,
"is_user_page": false,
"issues_url": "https://github.com/PrimerPages/jekyll-theme-profile/issues",
"language": "HTML",
"latest_release": {
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/2.0.0",
"id": 202143568,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MDHdQ",
"tag_name": "2.0.0",
"target_commitish": "refs/heads/main",
"name": "Release 2.0.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-06-29 17:23:18 UTC",
"published_at": "2025-06-29 17:43:39 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/2.0.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/2.0.0",
"body": "# What’s Changed\r\n\r\n## :zap: Major\r\n\r\n* Modify to support Github pages remote theme (#384) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix docs layout, add debug (#385) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>6 changes</summary>\r\n\r\n* Bump athackst/htmlproofer-action from 0.3.2 to 0.4.0 (#387) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.229.0 to 1.245.0 (#383) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.228.0 to 1.229.0 (#369) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.222.0 to 1.228.0 (#368) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.221.0 to 1.222.0 (#363) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump athackst/htmlproofer-action from 0.3.1 to 0.3.2 (#362) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n</details>\r\n",
"reactions": {
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/reactions",
"total_count": 1,
"+1": 0,
"-1": 0,
"laugh": 0,
"hooray": 0,
"confused": 0,
"heart": 0,
"rocket": 1,
"eyes": 0
},
"mentions_count": 1
},
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"organization_members": [],
"owner": {
"avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
"bio": null,
"blog": null,
"collaborators": null,
"company": null,
"created_at": "2025-05-13 21:18:32 UTC",
"description": "",
"email": null,
"followers": 0,
"following": 0,
"has_organization_projects": true,
"has_repository_projects": true,
"hireable": null,
"html_url": "https://github.com/PrimerPages",
"id": 211580654,
"is_verified": false,
"location": null,
"login": "PrimerPages",
"name": "PrimerPages",
"node_id": "O_kgDODJx27g",
"public_gists": 0,
"public_repos": 4,
"type": "Organization",
"updated_at": "2025-05-18 16:38:41 UTC"
},
"owner_gravatar_url": "https://github.com/PrimerPages.png",
"owner_name": "PrimerPages",
"owner_url": "https://github.com/PrimerPages",
"pages_env": "production",
"pages_hostname": "github.io",
"private": false,
"project_tagline": "Github Primer based Jekyll Theme",
"project_title": "jekyll-theme-profile",
"public_repositories": [
{
"id": 985944233,
"node_id": "R_kgDOOsRQqQ",
"name": "github-pages-demo",
"full_name": "PrimerPages/github-pages-demo",
"private": false,
"owner": {
"login": "PrimerPages",
"id": 211580654,
"node_id": "O_kgDODJx27g",
"avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/PrimerPages",
"html_url": "https://github.com/PrimerPages",
"followers_url": "https://api.github.com/users/PrimerPages/followers",
"following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
"gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
"organizations_url": "https://api.github.com/users/PrimerPages/orgs",
"repos_url": "https://api.github.com/users/PrimerPages/repos",
"events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
"received_events_url": "https://api.github.com/users/PrimerPages/received_events",
"type": "Organization",
"user_view_type": "public",
"site_admin": false
},
"html_url": "https://github.com/PrimerPages/github-pages-demo",
"description": null,
"fork": false,
"url": "https://api.github.com/repos/PrimerPages/github-pages-demo",
"forks_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/forks",
"keys_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/teams",
"hooks_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/hooks",
"issue_events_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/issues/events{/number}",
"events_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/events",
"assignees_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/assignees{/user}",
"branches_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/branches{/branch}",
"tags_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/tags",
"blobs_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/statuses/{sha}",
"languages_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/languages",
"stargazers_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/stargazers",
"contributors_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/contributors",
"subscribers_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/subscribers",
"subscription_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/subscription",
"commits_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/contents/{+path}",
"compare_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/merges",
"archive_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/downloads",
"issues_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/issues{/number}",
"pulls_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/pulls{/number}",
"milestones_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/milestones{/number}",
"notifications_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/labels{/name}",
"releases_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/releases{/id}",
"deployments_url": "https://api.github.com/repos/PrimerPages/github-pages-demo/deployments",
"created_at": "2025-05-18 20:57:27 UTC",
"updated_at": "2025-07-20 19:21:57 UTC",
"pushed_at": "2025-07-20 19:21:53 UTC",
"git_url": "git://github.com/PrimerPages/github-pages-demo.git",
"ssh_url": "git@github.com:PrimerPages/github-pages-demo.git",
"clone_url": "https://github.com/PrimerPages/github-pages-demo.git",
"svn_url": "https://github.com/PrimerPages/github-pages-demo",
"homepage": "https://primerpages.github.io/github-pages-demo/",
"size": 13522,
"stargazers_count": 0,
"watchers_count": 0,
"language": "HTML",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": true,
"has_discussions": false,
"forks_count": 0,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 0,
"license": null,
"allow_forking": true,
"is_template": false,
"web_commit_signoff_required": false,
"topics": [],
"visibility": "public",
"forks": 0,
"open_issues": 0,
"watchers": 0,
"default_branch": "main",
"permissions": {
"admin": false,
"maintain": false,
"push": false,
"triage": false,
"pull": false
}
},
{
"id": 985486864,
"node_id": "R_kgDOOr1WEA",
"name": "jekyll-github-template",
"full_name": "PrimerPages/jekyll-github-template",
"private": false,
"owner": {
"login": "PrimerPages",
"id": 211580654,
"node_id": "O_kgDODJx27g",
"avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/PrimerPages",
"html_url": "https://github.com/PrimerPages",
"followers_url": "https://api.github.com/users/PrimerPages/followers",
"following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
"gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
"organizations_url": "https://api.github.com/users/PrimerPages/orgs",
"repos_url": "https://api.github.com/users/PrimerPages/repos",
"events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
"received_events_url": "https://api.github.com/users/PrimerPages/received_events",
"type": "Organization",
"user_view_type": "public",
"site_admin": false
},
"html_url": "https://github.com/PrimerPages/jekyll-github-template",
"description": null,
"fork": false,
"url": "https://api.github.com/repos/PrimerPages/jekyll-github-template",
"forks_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/forks",
"keys_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/teams",
"hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/hooks",
"issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/issues/events{/number}",
"events_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/events",
"assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/assignees{/user}",
"branches_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/branches{/branch}",
"tags_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/tags",
"blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/statuses/{sha}",
"languages_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/languages",
"stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/stargazers",
"contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/contributors",
"subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/subscribers",
"subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/subscription",
"commits_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/contents/{+path}",
"compare_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/merges",
"archive_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/downloads",
"issues_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/issues{/number}",
"pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/pulls{/number}",
"milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/milestones{/number}",
"notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/labels{/name}",
"releases_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/releases{/id}",
"deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-github-template/deployments",
"created_at": "2025-05-17 21:37:57 UTC",
"updated_at": "2025-07-14 18:26:02 UTC",
"pushed_at": "2025-07-14 18:25:57 UTC",
"git_url": "git://github.com/PrimerPages/jekyll-github-template.git",
"ssh_url": "git@github.com:PrimerPages/jekyll-github-template.git",
"clone_url": "https://github.com/PrimerPages/jekyll-github-template.git",
"svn_url": "https://github.com/PrimerPages/jekyll-github-template",
"homepage": null,
"size": 50,
"stargazers_count": 0,
"watchers_count": 0,
"language": "Ruby",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": false,
"has_pages": true,
"has_discussions": false,
"forks_count": 0,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 0,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"allow_forking": true,
"is_template": true,
"web_commit_signoff_required": false,
"topics": [],
"visibility": "public",
"forks": 0,
"open_issues": 0,
"watchers": 0,
"default_branch": "main",
"permissions": {
"admin": false,
"maintain": false,
"push": false,
"triage": false,
"pull": false
}
},
{
"id": 985493342,
"node_id": "R_kgDOOr1vXg",
"name": "jekyll-meta-plugin",
"full_name": "PrimerPages/jekyll-meta-plugin",
"private": false,
"owner": {
"login": "PrimerPages",
"id": 211580654,
"node_id": "O_kgDODJx27g",
"avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/PrimerPages",
"html_url": "https://github.com/PrimerPages",
"followers_url": "https://api.github.com/users/PrimerPages/followers",
"following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
"gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
"organizations_url": "https://api.github.com/users/PrimerPages/orgs",
"repos_url": "https://api.github.com/users/PrimerPages/repos",
"events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
"received_events_url": "https://api.github.com/users/PrimerPages/received_events",
"type": "Organization",
"user_view_type": "public",
"site_admin": false
},
"html_url": "https://github.com/PrimerPages/jekyll-meta-plugin",
"description": "A lightweight Jekyll plugin that injects useful build-time metadata (Jekyll version, environment, Ruby version, etc.) into Liquid templates.",
"fork": false,
"url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin",
"forks_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/forks",
"keys_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/teams",
"hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/hooks",
"issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/issues/events{/number}",
"events_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/events",
"assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/assignees{/user}",
"branches_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/branches{/branch}",
"tags_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/tags",
"blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/statuses/{sha}",
"languages_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/languages",
"stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/stargazers",
"contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/contributors",
"subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/subscribers",
"subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/subscription",
"commits_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/contents/{+path}",
"compare_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/merges",
"archive_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/downloads",
"issues_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/issues{/number}",
"pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/pulls{/number}",
"milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/milestones{/number}",
"notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/labels{/name}",
"releases_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/releases{/id}",
"deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-meta-plugin/deployments",
"created_at": "2025-05-17 22:02:59 UTC",
"updated_at": "2025-05-24 06:29:16 UTC",
"pushed_at": "2025-05-24 06:30:51 UTC",
"git_url": "git://github.com/PrimerPages/jekyll-meta-plugin.git",
"ssh_url": "git@github.com:PrimerPages/jekyll-meta-plugin.git",
"clone_url": "https://github.com/PrimerPages/jekyll-meta-plugin.git",
"svn_url": "https://github.com/PrimerPages/jekyll-meta-plugin",
"homepage": "https://primerpages.github.io/jekyll-meta-plugin/",
"size": 34,
"stargazers_count": 0,
"watchers_count": 0,
"language": "Ruby",
"has_issues": true,
"has_projects": true,
"has_downloads": true,
"has_wiki": true,
"has_pages": true,
"has_discussions": false,
"forks_count": 0,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 0,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"allow_forking": true,
"is_template": false,
"web_commit_signoff_required": false,
"topics": [],
"visibility": "public",
"forks": 0,
"open_issues": 0,
"watchers": 0,
"default_branch": "main",
"permissions": {
"admin": false,
"maintain": false,
"push": false,
"triage": false,
"pull": false
}
},
{
"id": 666952321,
"node_id": "R_kgDOJ8DigQ",
"name": "jekyll-theme-profile",
"full_name": "PrimerPages/jekyll-theme-profile",
"private": false,
"owner": {
"login": "PrimerPages",
"id": 211580654,
"node_id": "O_kgDODJx27g",
"avatar_url": "https://avatars.githubusercontent.com/u/211580654?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/PrimerPages",
"html_url": "https://github.com/PrimerPages",
"followers_url": "https://api.github.com/users/PrimerPages/followers",
"following_url": "https://api.github.com/users/PrimerPages/following{/other_user}",
"gists_url": "https://api.github.com/users/PrimerPages/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PrimerPages/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PrimerPages/subscriptions",
"organizations_url": "https://api.github.com/users/PrimerPages/orgs",
"repos_url": "https://api.github.com/users/PrimerPages/repos",
"events_url": "https://api.github.com/users/PrimerPages/events{/privacy}",
"received_events_url": "https://api.github.com/users/PrimerPages/received_events",
"type": "Organization",
"user_view_type": "public",
"site_admin": false
},
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile",
"description": "Github Primer based Jekyll Theme",
"fork": false,
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile",
"forks_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/forks",
"keys_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/keys{/key_id}",
"collaborators_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/collaborators{/collaborator}",
"teams_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/teams",
"hooks_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/hooks",
"issue_events_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues/events{/number}",
"events_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/events",
"assignees_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/assignees{/user}",
"branches_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/branches{/branch}",
"tags_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tags",
"blobs_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/blobs{/sha}",
"git_tags_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/tags{/sha}",
"git_refs_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/refs{/sha}",
"trees_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/trees{/sha}",
"statuses_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/statuses/{sha}",
"languages_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/languages",
"stargazers_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/stargazers",
"contributors_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/contributors",
"subscribers_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/subscribers",
"subscription_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/subscription",
"commits_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/commits{/sha}",
"git_commits_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/git/commits{/sha}",
"comments_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/comments{/number}",
"issue_comment_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues/comments{/number}",
"contents_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/contents/{+path}",
"compare_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/compare/{base}...{head}",
"merges_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/merges",
"archive_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/{archive_format}{/ref}",
"downloads_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/downloads",
"issues_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/issues{/number}",
"pulls_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/pulls{/number}",
"milestones_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/milestones{/number}",
"notifications_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/notifications{?since,all,participating}",
"labels_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/labels{/name}",
"releases_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases{/id}",
"deployments_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/deployments",
"created_at": "2023-07-16 06:21:09 UTC",
"updated_at": "2025-06-29 17:23:21 UTC",
"pushed_at": "2025-07-22 17:30:32 UTC",
"git_url": "git://github.com/PrimerPages/jekyll-theme-profile.git",
"ssh_url": "git@github.com:PrimerPages/jekyll-theme-profile.git",
"clone_url": "https://github.com/PrimerPages/jekyll-theme-profile.git",
"svn_url": "https://github.com/PrimerPages/jekyll-theme-profile",
"homepage": "https://primerpages.github.io/jekyll-theme-profile/",
"size": 15343,
"stargazers_count": 9,
"watchers_count": 9,
"language": "HTML",
"has_issues": true,
"has_projects": false,
"has_downloads": true,
"has_wiki": false,
"has_pages": true,
"has_discussions": false,
"forks_count": 1,
"mirror_url": null,
"archived": false,
"disabled": false,
"open_issues_count": 1,
"license": {
"key": "mit",
"name": "MIT License",
"spdx_id": "MIT",
"url": "https://api.github.com/licenses/mit",
"node_id": "MDc6TGljZW5zZTEz"
},
"allow_forking": true,
"is_template": false,
"web_commit_signoff_required": false,
"topics": [
"jekyll-theme",
"jekyll-themes"
],
"visibility": "public",
"forks": 1,
"open_issues": 1,
"watchers": 9,
"default_branch": "main",
"permissions": {
"admin": false,
"maintain": false,
"push": false,
"triage": false,
"pull": false
}
}
],
"releases": [
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/2.0.0",
"id": 202143568,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MDHdQ",
"tag_name": "2.0.0",
"target_commitish": "refs/heads/main",
"name": "Release 2.0.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-06-29 17:23:18 UTC",
"published_at": "2025-06-29 17:43:39 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/2.0.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/2.0.0",
"body": "# What’s Changed\r\n\r\n## :zap: Major\r\n\r\n* Modify to support Github pages remote theme (#384) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix docs layout, add debug (#385) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>6 changes</summary>\r\n\r\n* Bump athackst/htmlproofer-action from 0.3.2 to 0.4.0 (#387) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.229.0 to 1.245.0 (#383) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.228.0 to 1.229.0 (#369) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.222.0 to 1.228.0 (#368) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.221.0 to 1.222.0 (#363) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump athackst/htmlproofer-action from 0.3.1 to 0.3.2 (#362) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n</details>\r\n",
"reactions": {
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202143568/reactions",
"total_count": 1,
"+1": 0,
"-1": 0,
"laugh": 0,
"hooray": 0,
"confused": 0,
"heart": 0,
"rocket": 1,
"eyes": 0
},
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/202118965/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.5",
"id": 202118965,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MDBc1",
"tag_name": "1.12.5",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.5",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-24 21:27:58 UTC",
"published_at": "2025-02-24 21:28:10 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.5",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.5",
"body": "# What’s Changed\n\n## :bug: Bug Fixes\n\n* Fix check for github pages (#360) @athackst\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201960229/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.4",
"id": 201960229,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MCasl",
"tag_name": "1.12.4",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.4",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-24 18:42:48 UTC",
"published_at": "2025-02-24 18:46:23 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.4",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.4",
"body": "# What’s Changed\n\n* Release v1.12.4 (#359) @athackst\n\n## :bug: Bug Fixes\n\n* Fix compatibility with github pages (#358) @athackst\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201958977/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.3",
"id": 201958977,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MCaZB",
"tag_name": "1.12.3",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.3",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-24 06:41:54 UTC",
"published_at": "2025-02-24 06:42:05 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.3",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.3",
"body": "# What’s Changed\n\n## :toolbox: Maintenance\n\n* Reducing required github-metadata to 2.9 (#356) @athackst\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201602307/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.2",
"id": 201602307,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MBDUD",
"tag_name": "1.12.2",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.2",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-24 05:01:14 UTC",
"published_at": "2025-02-24 05:01:27 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.2",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.2",
"body": "# What’s Changed\n\n* Release v1.12.2 (#355) @athackst\n* Update Gemfiles to rate limit GitHub calls (#354) @athackst\n\n## :toolbox: Maintenance\n\n* Add script to close stale releases to workflow (#353) @athackst\n\n## Dependency Updates\n\n* Bump peter-evans/create-pull-request from 5 to 7 (#352) @[dependabot[bot]](https://github.com/apps/dependabot)\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/201595899/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.1",
"id": 201595899,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4MBBv7",
"tag_name": "1.12.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-21 07:26:51 UTC",
"published_at": "2025-02-21 07:27:02 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.1",
"body": "# What’s Changed\n\n## :bug: Bug Fixes\n\n* Add relative_url to docs dropdown nav links (#349) @athackst\n* Fix css theme colors (#348) @athackst\n* Fix custom header color (#347) @athackst\n* Fix post timeline card image to use relative_url (#346) @athackst\n\n## :memo: Documentation\n\n* Fix post descriptions (#350) @athackst\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/200778012/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.12.0",
"id": 200778012,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4L96Ec",
"tag_name": "1.12.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.12.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-21 06:32:16 UTC",
"published_at": "2025-02-21 06:32:28 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.12.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.12.0",
"body": "# What’s Changed\n\n## :rocket: New\n\n* Update primer css to 21.5.1 (#335) @athackst\n* Add option to set favicon from the config (#329) @athackst\n\n## :bug: Bug Fixes\n\n* Let include set social tooltip direction (#332) @athackst\n* Support links to tags from post timeline (#330) @athackst\n\n## :toolbox: Maintenance\n\n* Workflows use release token so other workflows are triggered (#344) @athackst\n* Cleanup masthead css (#343) @athackst\n* Fix lookup function for open release PRs (#340) @athackst\n* Update release draft workflow (#338) @athackst\n* Create release pr workflow (#336) @athackst\n* Set size of the masthead through include (#333) @athackst\n* Move unused images to demo so they're not included in theme (#331) @athackst\n* Cleanup unneeded lines in workflows (#328) @athackst\n* Remove bumping and add version determination to release workflow (#327) @athackst\n\n## :memo: Documentation\n\n* Update demo documentation (#326) @athackst\n\n## Dependency Updates\n\n* Bump ruby/setup-ruby from 1.214.0 to 1.221.0 (#325) @[dependabot[bot]](https://github.com/apps/dependabot)\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197472736/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.11.0",
"id": 197472736,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4LxTHg",
"tag_name": "1.11.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.11.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-02-15 02:20:07 UTC",
"published_at": "2025-02-17 07:54:56 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.11.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.11.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add edit links to bottom of doc if edit_url is set (#317) @athackst\r\n* Make paginator navigation links an include file (#305) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix custom header sidebar so position is fixed (#324) @athackst\r\n* Polish up header colors, fix docs (#322) @athackst\r\n* Add color behind docs menu (#321) @athackst\r\n* Tag links to use relative_url (#320) @athackst\r\n* Fix all spelling words (#319) @athackst\r\n* Fix continue spelling in timeline card (#318) @athackst\r\n* Update timeline card to better handle continue and pagination (#315) @athackst\r\n* Fix all menus (#314) @athackst\r\n* Fix overlay menu in sidebar and stacked styles (#311) @athackst\r\n* Fix up how custom colors are handled, add header image (#310) @athackst\r\n* Update spacing between components (#306) @athackst\r\n* Fix formatting and improve encapsulation of link cards (#303) @athackst\r\n* Fix typo in post-timeline causing posts to not show up in profile layout (#302) @athackst\r\n* Refactor post-timeline to be more maintainable (#301) @athackst\r\n* Update the spacing of post-timeline card (#300) @athackst\r\n* Update default config (#293) @athackst\r\n* Update link card, linktree and profile to use include (#290) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Add tag index to root (#309) @athackst\r\n* Sort plugins (#308) @athackst\r\n* Remove unneeded spec files dir _plugins (#307) @athackst\r\n* Update page to include title if set and tag and category layouts to use (#304) @athackst\r\n* Add jekyll build and serve tasks (#295) @athackst\r\n* Remove incremental from serve script (#294) @athackst\r\n* Streamline vscode tasks and reduce dependencies (#289) @athackst\r\n* Update demo posts (#287) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Add post for custom header (#323) @athackst\r\n* Add live demo to paginate timeline doc (#316) @athackst\r\n* Add octicons to links to demo pages (#299) @athackst\r\n* Update main readme file to link to site (#298) @athackst\r\n* Reorganize and update docs (#297) @athackst\r\n* Improve index and style pages for better preview (#296) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/197072830/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.10.1",
"id": 197072830,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4Lvxe-",
"tag_name": "1.10.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.10.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-01-29 20:18:11 UTC",
"published_at": "2025-01-29 20:25:33 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.10.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.10.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Assign user_img where it is used (#286) @athackst\r\n* Update post timeline to attempt to find index (#285) @athackst\r\n* Remove video from post header (#284) @athackst\r\n* Add default image to masthead (#283) @athackst\r\n* Remove options from default config that aren't needed (#282) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update devcontainer and vscode settings (#281) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump release-drafter/release-drafter from 6.0.0 to 6.1.0 (#278) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n* Bump ruby/setup-ruby from 1.207.0 to 1.214.0 (#280) @[dependabot[bot]](https://github.com/apps/dependabot)\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.10.0",
"id": 168568137,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4KDCVJ",
"tag_name": "1.10.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.10.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2025-01-10 19:00:01 UTC",
"published_at": "2025-01-27 04:21:42 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.10.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.10.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Include _config.yml in gem file to provide a default config (#267) @athackst\r\n* Update docs layout and menu (#247) @athackst\r\n* Update linktree and linktree-card, make docs (#246) @athackst\r\n* Update post-timeline and add paginate_timeline layout (#245) @athackst\r\n* Add post-index include and update tag_index layout to use it (#244) @athackst\r\n* Add post-gallery include and update category_index layout to use it (#243) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix post timeline to work with post limit and reverse order (#248) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Drop deprecated ruby version 2.7 (#269) @athackst\r\n* Handle the case of empty public repositories (#268) @athackst\r\n* Update config so that a basic site can be built from main (#266) @athackst\r\n* Migrate from deprecated sass import (#264) @athackst\r\n* Add ports to devcontainer configuration (#242) @athackst\r\n* Update dev setup (#241) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>12 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.206.0 to 1.207.0 (#275) @dependabot\r\n* Bump athackst/htmlproofer-action from 0.3.0 to 0.3.1 (#274) @dependabot\r\n* Bump ruby/setup-ruby from 1.204.0 to 1.206.0 (#273) @dependabot\r\n* Bump ruby/setup-ruby from 1.203.0 to 1.204.0 (#265) @dependabot\r\n* Bump ruby/setup-ruby from 1.202.0 to 1.203.0 (#262) @dependabot\r\n* Bump ruby/setup-ruby from 1.201.0 to 1.202.0 (#261) @dependabot\r\n* Bump ruby/setup-ruby from 1.200.0 to 1.201.0 (#260) @dependabot\r\n* Bump ruby/setup-ruby from 1.199.0 to 1.200.0 (#259) @dependabot\r\n* Bump ruby/setup-ruby from 1.197.0 to 1.199.0 (#258) @dependabot\r\n* Bump ruby/setup-ruby from 1.196.0 to 1.197.0 (#256) @dependabot\r\n* Bump ruby/setup-ruby from 1.191.0 to 1.196.0 (#255) @dependabot\r\n* Bump ruby/setup-ruby from 1.190.0 to 1.191.0 (#250) @dependabot\r\n</details>\r\n",
"reactions": {
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/168568137/reactions",
"total_count": 1,
"+1": 0,
"-1": 0,
"laugh": 0,
"hooray": 1,
"confused": 0,
"heart": 0,
"rocket": 0,
"eyes": 0
},
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/139745225/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.9.0",
"id": 139745225,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4IVFfJ",
"tag_name": "1.9.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.9.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2024-08-03 04:43:31 UTC",
"published_at": "2024-08-03 04:48:41 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.9.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.9.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Replace home with profile layout (#220) @athackst\r\n* Fix documentation layout and add docs (#219) @athackst\r\n* Add ability to set light and dark themes by name (#218) @athackst\r\n* Add video as heading image if defined (#217) @athackst\r\n* Add support for jekyll-category-pages plugin (#216) @athackst\r\n* Add class to masthead to adjust the circle badge size (#215) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix category_layout.html (#240) @athackst\r\n* Fix relative links and layouts page (#239) @athackst\r\n* Fix docs urls (#238) @athackst\r\n* Add rake to gemfile (#206) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Add local path to post create command (#214) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>15 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.188.0 to 1.190.0 (#237) @dependabot\r\n* Bump ruby/setup-ruby from 1.187.0 to 1.188.0 (#236) @dependabot\r\n* Bump ruby/setup-ruby from 1.184.0 to 1.187.0 (#235) @dependabot\r\n* Bump ruby/setup-ruby from 1.183.0 to 1.184.0 (#232) @dependabot\r\n* Bump ruby/setup-ruby from 1.180.0 to 1.183.0 (#231) @dependabot\r\n* Bump ruby/setup-ruby from 1.179.0 to 1.180.0 (#227) @dependabot\r\n* Bump ruby/setup-ruby from 1.178.0 to 1.179.0 (#225) @dependabot\r\n* Bump ruby/setup-ruby from 1.175.1 to 1.178.0 (#224) @dependabot\r\n* Bump ruby/setup-ruby from 1.173.0 to 1.175.1 (#213) @dependabot\r\n* Bump actions/configure-pages from 4 to 5 (#210) @dependabot\r\n* Bump ruby/setup-ruby from 1.172.0 to 1.173.0 (#209) @dependabot\r\n* Bump ruby/setup-ruby from 1.171.0 to 1.172.0 (#208) @dependabot\r\n* Bump TimonVS/pr-labeler-action from 4 to 5 (#207) @dependabot\r\n* Bump ruby/setup-ruby from 1.162.0 to 1.171.0 (#204) @dependabot\r\n* Bump release-drafter/release-drafter from 5.25.0 to 6.0.0 (#205) @dependabot\r\n</details>\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134843428/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.6",
"id": 134843428,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4ICYwk",
"tag_name": "1.8.6",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.6",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-22 22:54:43 UTC",
"published_at": "2023-12-22 22:56:39 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.6",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.6",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Update cookie to be strict (#194) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update jekyll site deps (#195) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134395615/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.5",
"id": 134395615,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4IArbf",
"tag_name": "1.8.5",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.5",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-20 21:26:59 UTC",
"published_at": "2023-12-20 21:33:44 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.5",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.5",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix timeline video size (#189) @athackst\r\n* Fix the height of videos in timeline card (#186) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/deploy-pages from 3 to 4 (#187) @dependabot\r\n* Bump actions/upload-pages-artifact from 2 to 3 (#188) @dependabot\r\n* Revert \"Bump actions/upload-pages-artifact from 2 to 3\" (#191) @athackst\r\n* Revert \"Bump actions/deploy-pages from 3 to 4\" (#190) @athackst\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/134384290/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.4",
"id": 134384290,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4IAoqi",
"tag_name": "1.8.4",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.4",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-18 21:08:39 UTC",
"published_at": "2023-12-18 21:27:07 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.4",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.4",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove Toolbar class from landing page (#185) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/133456177/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.3",
"id": 133456177,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H9GEx",
"tag_name": "1.8.3",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.3",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-15 20:50:39 UTC",
"published_at": "2023-12-17 21:48:24 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.3",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.3",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove duplicate title tag (#183) @athackst\r\n* Fix appearance of video on mobile in timeline (#181) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Rename 'example' to 'demo' (#184) @athackst\r\n* Add data-proofer-ignore to socials (#182) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump ruby/setup-ruby from 1.161.0 to 1.162.0 (#180) @dependabot\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132879125/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.2",
"id": 132879125,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H65MV",
"tag_name": "1.8.2",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.2",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-07 08:46:09 UTC",
"published_at": "2023-12-07 17:53:08 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.2",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.2",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove height-full from page (#179) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/deploy-pages from 2 to 3 (#177) @dependabot\r\n* Bump actions/configure-pages from 3 to 4 (#176) @dependabot\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/132353188/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.1",
"id": 132353188,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H44yk",
"tag_name": "1.8.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-03 05:46:17 UTC",
"published_at": "2023-12-03 05:49:28 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add kramdown parser to dependencies (#175) @athackst\r\n* Fix post print styles (#174) @athackst\r\n* Fix location of social in footer to be right justified (#173) @athackst\r\n* Fix location of the toggle in the landing layout (#172) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131597155/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.8.0",
"id": 131597155,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H2ANj",
"tag_name": "1.8.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.8.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-12-01 22:02:56 UTC",
"published_at": "2023-12-01 22:21:32 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.8.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.8.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add docs layout (#169) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix docs menu (#171) @athackst\r\n* Fix tag link (#166) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131491741/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.2",
"id": 131491741,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H1med",
"tag_name": "1.7.2",
"target_commitish": "refs/heads/main",
"name": "Release 1.7.2",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-27 08:01:20 UTC",
"published_at": "2023-11-27 08:05:00 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.2",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.2",
"body": "# What’s Changed\r\n\r\n* Update nav so that paths highlight when active (#160) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Only show related posts if the size is >0 (#164) @athackst\r\n* Add div to extend page to full height of screen (#163) @athackst\r\n* Use either the excerpt or the description in post-card (#162) @athackst\r\n* Fix formatting of linktree layout and allow defining links per page (#159) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update style/formatting (#165) @athackst\r\n* Fix permissions of jekyll workflow (#161) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Add appbar to readme (#158) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/131393909/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.1",
"id": 131393909,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4H1Ol1",
"tag_name": "1.7.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.7.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-26 16:26:09 UTC",
"published_at": "2023-11-26 16:29:42 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Remove unneeded dependencies from gemspec and refactor (#157) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130831816/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.7.0",
"id": 130831816,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HzFXI",
"tag_name": "1.7.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.7.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-23 02:17:24 UTC",
"published_at": "2023-11-23 02:17:51 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.7.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.7.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add related posts to post page (#152) @athackst\r\n* Add tags to post layout and add tag page (#151) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix share link image for twitter->x (#154) @athackst\r\n* Fix toc so it doesn't improperly show on pages (#153) @athackst\r\n* Fix feature card (#150) @athackst\r\n* Update posts_limit to be able to be defined in page (#149) @athackst\r\n* Check for content before displaying continue in timeline block (#148) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Improve readability of comments in config (#155) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130711371/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.6.1",
"id": 130711371,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4Hyn9L",
"tag_name": "1.6.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.6.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-21 17:47:54 UTC",
"published_at": "2023-11-21 17:52:21 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.6.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.6.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Move page style elements to .Page (#147) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/130699545/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.6.0",
"id": 130699545,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HylEZ",
"tag_name": "1.6.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.6.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-21 17:28:35 UTC",
"published_at": "2023-11-21 17:30:52 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.6.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.6.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add new landing page (#145) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix formatting (#141) @athackst\r\n* Use either video or image in the post timeline (#140) @athackst\r\n* For posts use image for post or site image (#139) @athackst\r\n* set user_metadata from site only (#138) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Improve consistency in workflow names (#146) @athackst\r\n* Add permissions to bump_version workflow (#142) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/129872816/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.5.0",
"id": 129872816,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HvbOw",
"tag_name": "1.5.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.5.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-21 06:01:22 UTC",
"published_at": "2023-11-21 06:03:59 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.5.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.5.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add repositories layout and test page (#133) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix stacked header top margin (#134) @athackst\r\n* Fix minor formatting issues (#132) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update bump version workflow (#137) @athackst\r\n* Rename pr labeler workflow (#136) @athackst\r\n* Rename workflow publish_docs to jekyll_site (#135) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/119752951/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.4.0",
"id": 119752951,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HI0j3",
"tag_name": "1.4.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.4.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-11-16 22:21:52 UTC",
"published_at": "2023-11-16 22:34:11 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.4.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.4.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add profile layout (#109) @athackst\r\n* Add linktree example and custom css for page (#96) @athackst\r\n* Update blog post style to match github blog (#94) @athackst\r\n* Redesign and add appbar option (#93) @athackst\r\n* Update the look of posts on paginate (#92) @athackst\r\n* Add footer (#83) @athackst\r\n* Allow post timeline to grab icon from type (#71) @athackst\r\n* Add print styles for clean prints of pages (#70) @athackst\r\n* Add menu for nav dropdown on mobile (#69) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Update stacked layout on mobile to show the header (#131) @athackst\r\n* Another try to fix the circle badge (#130) @athackst\r\n* Another try to fix circle badge in masthead (#129) @athackst\r\n* Fix various padding issues (#126) @athackst\r\n* Add padding to masthead image so border doesn't get cut off (#125) @athackst\r\n* Update anchor link height on resize (#123) @athackst\r\n* Remove gutter-condensed from posts (#122) @athackst\r\n* Fix padding for masthead (#121) @athackst\r\n* Fix timeline anchor to update on resize (#120) @athackst\r\n* Improve linkcard formatting (#119) @athackst\r\n* Change layout to of Profile to Page (#118) @athackst\r\n* Change tooltip position of mini-repo-info card to (#117) @athackst\r\n* Use image tag instead of social_image for SEO (#115) @athackst\r\n* Move from gutter-condensed to p-responsive (#114) @athackst\r\n* Attempt to fix nav overlay height for iphone - emulators not working (#113) @athackst\r\n* Simplify nav overlay (#112) @athackst\r\n* Switch to the SEO plugin (#111) @athackst\r\n* Fix sidebar, add collapse option (#110) @athackst\r\n* Fix minor formatting errors (#108) @athackst\r\n* Fix toc capture and convert README to post (#107) @athackst\r\n* Fix linktree width when viewing on mobile (#106) @athackst\r\n* Add additional padding to overlay to handle iphone screens better (#105) @athackst\r\n* Add script to calculate sticky position for timeline (#103) @athackst\r\n* Rename and make post timeline look more like github blog (#91) @athackst\r\n* Fix centering on masthead (#90) @athackst\r\n* Fix instagram and threads social icons (#87) @athackst\r\n* Fix footer formatting (#86) @athackst\r\n* Fix links to have a better max width (#84) @athackst\r\n* Fix toggle location so it doesn't cause scrolling (#82) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update profile page name in config (#124) @athackst\r\n* Add default container extensions to devcontainer (#116) @athackst\r\n* Cleanup global assigns (#104) @athackst\r\n* Update link thumbnails (#95) @athackst\r\n* Add Link css to link-card for easier overriding (#89) @athackst\r\n* Move scripts to assets/js (#88) @athackst\r\n* Rename header.html to head to better classify contents (#77) @athackst\r\n\r\n## :memo: Documentation\r\n\r\n* Update contributing documentation (#128) @athackst\r\n\r\n## Dependency Updates\r\n\r\n<details>\r\n<summary>10 changes</summary>\r\n\r\n* Bump ruby/setup-ruby from 1.160.0 to 1.161.0 (#127) @dependabot\r\n* Bump ruby/setup-ruby from 1.159.0 to 1.160.0 (#85) @dependabot\r\n* Bump ruby/setup-ruby from 1.158.0 to 1.159.0 (#81) @dependabot\r\n* Bump ruby/setup-ruby from 1.156.0 to 1.158.0 (#80) @dependabot\r\n* Bump release-drafter/release-drafter from 5.24.0 to 5.25.0 (#78) @dependabot\r\n* Bump ruby/setup-ruby from 1.155.0 to 1.156.0 (#76) @dependabot\r\n* Bump ruby/setup-ruby from 1.154.0 to 1.155.0 (#75) @dependabot\r\n* Bump ruby/setup-ruby from 1.153.0 to 1.154.0 (#74) @dependabot\r\n* Bump ruby/setup-ruby from 1.152.0 to 1.153.0 (#73) @dependabot\r\n* Bump actions/checkout from 3 to 4 (#72) @dependabot\r\n</details>\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/118062753/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.3.1",
"id": 118062753,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HCX6h",
"tag_name": "1.3.1",
"target_commitish": "refs/heads/main",
"name": "Release 1.3.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-31 02:27:38 UTC",
"published_at": "2023-09-04 00:24:59 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.3.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.3.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Standardize theme toggle placement across all styles (#68) @athackst\r\n* Fix typos in meta tags (#65) @athackst\r\n* Increase topbar container size to xl (#64) @athackst\r\n* Fix margin to be padding so overlay works with background on header (#63) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Clean up assigns in layouts and includes (#67) @athackst\r\n* Cleanup assignments in header (#66) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.3.0",
"id": 117925125,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4HB2UF",
"tag_name": "1.3.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.3.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-20 21:09:19 UTC",
"published_at": "2023-08-20 21:09:57 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.3.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.3.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add optional header custom styling (#60) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add required ruby version (#62) @athackst\r\n* Update syntax highlighting to handle line numbers (#61) @athackst\r\n* Fix typo in accessing background.overlay (#59) @athackst\r\n",
"reactions": {
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117925125/reactions",
"total_count": 1,
"+1": 0,
"-1": 0,
"laugh": 0,
"hooray": 1,
"confused": 0,
"heart": 0,
"rocket": 0,
"eyes": 0
},
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/117226605/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.2.0",
"id": 117226605,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G_Lxt",
"tag_name": "1.2.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.2.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-14 20:49:20 UTC",
"published_at": "2023-08-14 20:50:43 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.2.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.2.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Set color of profile from _config.yml (#57) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116980065/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.1.0",
"id": 116980065,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G-Plh",
"tag_name": "1.1.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.1.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-14 02:34:44 UTC",
"published_at": "2023-08-14 02:41:55 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.1.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.1.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add tooltips to repo-info and color toggle (#55) @athackst\r\n* Add mail and github to social links (#54) @athackst\r\n* Add general overlay option (#53) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Increase spacing between toggle and user image (#56) @athackst\r\n* Fix minor spacing issues (#52) @athackst\r\n* Truncate previous and next post titles (#51) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/116155614/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/1.0.0",
"id": 116155614,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G7GTe",
"tag_name": "1.0.0",
"target_commitish": "refs/heads/main",
"name": "Release 1.0.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-13 05:53:22 UTC",
"published_at": "2023-08-13 06:00:01 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/1.0.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/1.0.0",
"body": "# What’s Changed\r\n\r\n## :zap: Breaking\r\n\r\n* Update site social card image to 'social_image' (#45) @athackst\r\n* Rename link urls and images to 'url' and 'thumbnail' (#43) @athackst\r\n\r\n## :rocket: New\r\n\r\n* Add mini repo card and fix up default layouts (#48) @athackst\r\n* Update site social card image to 'social_image' (#45) @athackst\r\n* Add nav option for website (#44) @athackst\r\n* Add ability to set social icon colors from config (#42) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix spelling (#50) @athackst\r\n* Make nav items use relative-url (#49) @athackst\r\n* Fix formatting issue created by d-flex for mobile (#47) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Move images to media folder so gem doesn't include them (#46) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114765901/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.3.0",
"id": 114765901,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G1zBN",
"tag_name": "0.3.0",
"target_commitish": "refs/heads/main",
"name": "Release 0.3.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-10 06:36:07 UTC",
"published_at": "2023-08-10 06:43:17 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.3.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.3.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add background option (#40) @athackst\r\n* Add social media support for threads and x (#36) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix breadcrumbs (#35) @athackst\r\n* Update sidebar spacing (#34) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Fix/success check (#39) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114600581/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.5",
"id": 114600581,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G1KqF",
"tag_name": "0.2.5",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.5",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-08-01 06:55:57 UTC",
"published_at": "2023-08-01 07:07:57 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.5",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.5",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Make canonical link from absolute_url (#31) @athackst\r\n* Add alt to social images (#30) @athackst\r\n* Fix masthead name so that it will wrap if needed (#29) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114574234/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.4",
"id": 114574234,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G1EOa",
"tag_name": "0.2.4",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.4",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-31 22:58:24 UTC",
"published_at": "2023-07-31 23:04:35 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.4",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.4",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Append index.html to the meta urls seems to fix twitter cards. (#28) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump actions/upload-pages-artifact from 1 to 2 (#27) @dependabot\r\n",
"mentions_count": 2
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114438398/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.3",
"id": 114438398,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G0jD-",
"tag_name": "0.2.3",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.3",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-31 06:32:37 UTC",
"published_at": "2023-07-31 06:35:32 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.3",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.3",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix folder URLs for meta and nav (#26) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114414457/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.2",
"id": 114414457,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G0dN5",
"tag_name": "0.2.2",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.2",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-30 23:04:04 UTC",
"published_at": "2023-07-30 23:13:24 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.2",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.2",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Fix default permalink to include index so twitter cards will work. (#25) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114355894/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.1",
"id": 114355894,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4G0O62",
"tag_name": "0.2.1",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.1",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-30 03:00:04 UTC",
"published_at": "2023-07-30 15:19:20 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.1",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.1",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Meta from an autogenerator to fix typos. (#24) @athackst\r\n* Fix twitter cards (#23) @athackst\r\n* Chanage type to website (#22) @athackst\r\n* Try changing meta type to object (#21) @athackst\r\n* Fix twitter image meta (#20) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/114059595/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.2.0",
"id": 114059595,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4GzGlL",
"tag_name": "0.2.0",
"target_commitish": "refs/heads/main",
"name": "Release 0.2.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-29 23:22:14 UTC",
"published_at": "2023-07-29 23:28:02 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.2.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.2.0",
"body": "# What’s Changed\r\n\r\n## :rocket: New\r\n\r\n* Add twitter card to header (#18) @athackst\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Use absoulte urls in meta data (#19) @athackst\r\n* Fix social image (#17) @athackst\r\n* Fix social and header links (#16) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Update docs workflow to include 'canonical' jekyll build->deploy (#15) @athackst\r\n* Add release task to devcontainer (#14) @athackst\r\n",
"mentions_count": 1
},
{
"url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693",
"assets_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693/assets",
"upload_url": "https://uploads.github.com/repos/PrimerPages/jekyll-theme-profile/releases/113942693/assets{?name,label}",
"html_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases/tag/0.1.0",
"id": 113942693,
"author": {
"login": "github-actions[bot]",
"id": 41898282,
"node_id": "MDM6Qm90NDE4OTgyODI=",
"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/github-actions%5Bbot%5D",
"html_url": "https://github.com/apps/github-actions",
"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
"type": "Bot",
"user_view_type": "public",
"site_admin": false
},
"node_id": "RE_kwDOJ8Digc4GyqCl",
"tag_name": "0.1.0",
"target_commitish": "refs/heads/main",
"name": "Release 0.1.0",
"draft": false,
"immutable": false,
"prerelease": false,
"created_at": "2023-07-28 19:29:04 UTC",
"published_at": "2023-07-28 19:34:50 UTC",
"assets": [],
"tarball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/tarball/0.1.0",
"zipball_url": "https://api.github.com/repos/PrimerPages/jekyll-theme-profile/zipball/0.1.0",
"body": "# What’s Changed\r\n\r\n## :bug: Bug Fixes\r\n\r\n* Add logic to handle paginate from assets so defaults will work (#13) @athackst\r\n* Fix nav links to be relative (#12) @athackst\r\n* Fix version spacing. (#11) @athackst\r\n* Fix page links (#10) @athackst\r\n* Update paginate links to be relative_url (#8) @athackst\r\n* Fix workflow files. (#6) @athackst\r\n\r\n## :toolbox: Maintenance\r\n\r\n* Fix bump spacing (#9) @athackst\r\n* Update to release token (#7) @athackst\r\n\r\n## Dependency Updates\r\n\r\n* Bump release-drafter/release-drafter from 5.20.0 to 5.24.0 (#3) @dependabot\r\n* Bump TimonVS/pr-labeler-action from 3.1.0 to 4.1.1 (#2) @dependabot\r\n",
"mentions_count": 2
}
],
"releases_url": "https://github.com/PrimerPages/jekyll-theme-profile/releases",
"repository_name": "jekyll-theme-profile",
"repository_nwo": "PrimerPages/jekyll-theme-profile",
"repository_url": "https://github.com/PrimerPages/jekyll-theme-profile",
"show_downloads": true,
"source": {
"branch": "main",
"path": "/"
},
"tar_url": "https://github.com/PrimerPages/jekyll-theme-profile/tarball/main",
"url": "https://primerpages.github.io/jekyll-theme-profile",
"versions": {},
"wiki_url": null,
"zip_url": "https://github.com/PrimerPages/jekyll-theme-profile/zipball/main"
},
"url": "https://primerpages.github.io",
"meta": {
"jekyll_version": "4.4.1",
"jekyll_major_version": 4,
"environment": "production",
"ruby_version": "3.3.4"
},
"tag_data": [
[
"appbar",
1
],
[
"background",
1
],
[
"customization",
2
],
[
"example",
4
],
[
"header",
1
],
[
"how-to",
2
],
[
"includes",
1
],
[
"news",
3
],
[
"sidebar",
2
],
[
"stacked",
1
],
[
"style",
5
],
[
"test",
3
],
[
"topbar",
1
],
[
"video",
1
],
[
"welcome",
1
]
]
}
Page Variables
{
"content": "<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>{{ jekyll.version }}</pre>\n\n\n<h1 id=\"environment-variables\">Jekyll environment</h1>\n<pre>{{ jekyll.environment }}</pre>\n\n\n<h1 id=\"site-variables\">Site Variables</h1>\n<pre>{{ site | inspect }}</pre>\n\n<h1 id=\"page-variables\">Page Variables</h1>\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n<h1 id=\"paginator-variables\">Paginator Variables</h1>\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
"tags": [],
"name": "debug.html",
"path": "_docs/debug.html",
"url": "/docs/debug.html",
"collection": "docs",
"id": "/docs/debug",
"relative_path": "_docs/debug.html",
"next": null,
"previous": {
"content": "<p>You can also use this with GitHub actions. Below is a typical workflow file</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Sample workflow for building and deploying a Jekyll site to GitHub Pages</span>\n<span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n\n<span class=\"na\">on</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Runs on pushes targeting the default branch</span>\n <span class=\"na\">push</span><span class=\"pi\">:</span>\n <span class=\"na\">branches</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"s2\">\"</span><span class=\"s\">main\"</span><span class=\"pi\">]</span>\n\n <span class=\"c1\"># Run on every pull request</span>\n <span class=\"na\">pull_request</span><span class=\"pi\">:</span>\n <span class=\"na\">types</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">opened</span><span class=\"pi\">,</span> <span class=\"nv\">reopened</span><span class=\"pi\">,</span> <span class=\"nv\">synchronize</span> <span class=\"pi\">]</span>\n\n <span class=\"c1\"># Allows you to run this workflow manually from the Actions tab</span>\n <span class=\"na\">workflow_dispatch</span><span class=\"pi\">:</span>\n\n <span class=\"na\">schedule</span><span class=\"pi\">:</span>\n <span class=\"c1\"># This will refresh your repositories and other user information every day</span>\n <span class=\"c1\"># * is a special character in YAML so you have to quote this string</span>\n <span class=\"c1\"># Generate from https://crontab.guru/</span>\n <span class=\"c1\"># ┌───────────── minute (0 - 59)</span>\n <span class=\"c1\"># │ ┌───────────── hour (0 - 23)</span>\n <span class=\"c1\"># │ │ ┌───────────── day of the month (1 - 31)</span>\n <span class=\"c1\"># │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)</span>\n <span class=\"c1\"># │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># * * * * *</span>\n <span class=\"pi\">-</span> <span class=\"na\">cron</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*\"</span>\n\n<span class=\"c1\"># Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages</span>\n<span class=\"na\">permissions</span><span class=\"pi\">:</span>\n <span class=\"na\">contents</span><span class=\"pi\">:</span> <span class=\"s\">read</span> <span class=\"c1\"># needed to read your repository</span>\n <span class=\"na\">pages</span><span class=\"pi\">:</span> <span class=\"s\">write</span> <span class=\"c1\"># needed to enable and deploy github pages</span>\n <span class=\"na\">id-token</span><span class=\"pi\">:</span> <span class=\"s\">write</span>\n\n<span class=\"c1\"># Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.</span>\n<span class=\"c1\"># However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.</span>\n<span class=\"na\">concurrency</span><span class=\"pi\">:</span>\n <span class=\"na\">group</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">pages\"</span>\n <span class=\"na\">cancel-in-progress</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n\n<span class=\"na\">jobs</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Build job</span>\n <span class=\"na\">build</span><span class=\"pi\">:</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Checkout</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/checkout@v3</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Ruby</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">ruby/setup-ruby@v1.152.0</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">bundler-cache</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># runs 'bundle install' and caches installed gems automatically</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">pages</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/configure-pages@v3</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">enablement</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Enable github pages if it's not</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Build</span>\n <span class=\"na\">run</span><span class=\"pi\">:</span> <span class=\"s\">bundle exec jekyll build</span>\n <span class=\"na\">env</span><span class=\"pi\">:</span>\n <span class=\"na\">JEKYLL_ENV</span><span class=\"pi\">:</span> <span class=\"s\">production</span>\n <span class=\"na\">JEKYLL_GITHUB_TOKEN</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Upload artifact</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/upload-pages-artifact@v3</span>\n\n <span class=\"c1\"># Deployment job</span>\n <span class=\"na\">deploy</span><span class=\"pi\">:</span>\n <span class=\"na\">if</span><span class=\"pi\">:</span> <span class=\"s\">github.ref == 'refs/heads/main'</span> <span class=\"c1\"># Only deploy from the main branch</span>\n <span class=\"na\">environment</span><span class=\"pi\">:</span>\n <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">github-pages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">needs</span><span class=\"pi\">:</span> <span class=\"s\">build</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Deploy to GitHub Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">deployment</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/deploy-pages@v4</span>\n\n</code></pre></div></div>\n",
"tags": [],
"name": "github-action.md",
"path": "_docs/github-action.md",
"url": "/docs/github-action.html",
"collection": "docs",
"id": "/docs/github-action",
"relative_path": "_docs/github-action.md",
"next": {
"content": "<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>{{ jekyll.version }}</pre>\n\n\n<h1 id=\"environment-variables\">Jekyll environment</h1>\n<pre>{{ jekyll.environment }}</pre>\n\n\n<h1 id=\"site-variables\">Site Variables</h1>\n<pre>{{ site | inspect }}</pre>\n\n<h1 id=\"page-variables\">Page Variables</h1>\n<pre>{{ page | inspect }}</pre>\n\n{% if paginator %}\n<h1 id=\"paginator-variables\">Paginator Variables</h1>\n\n<pre>{{ paginator | inspect }}</pre>\n{% endif %}\n",
"tags": [],
"name": "debug.html",
"path": "_docs/debug.html",
"url": "/docs/debug.html",
"collection": "docs",
"id": "/docs/debug",
"relative_path": "_docs/debug.html",
"next": null,
"previous": {
"tags": [],
"name": "github-action.md",
"path": "_docs/github-action.md",
"url": "/docs/github-action.html",
"collection": "docs",
"id": "/docs/github-action",
"relative_path": "_docs/github-action.md",
"title": "Using with a GitHub action",
"date": "2025-07-25 01:49:18 +0000",
"categories": [
"Advanced"
],
"draft": false,
"layout": "docs",
"image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 100,
"category": "Advanced",
"slug": "github-action",
"ext": ".md"
},
"excerpt": "<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>4.4.1</pre>",
"title": "Debug",
"date": "2025-07-25 01:49:18 +0000",
"output": null,
"categories": [],
"draft": false,
"layout": "docs",
"image": "/assets/img/default.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 200,
"slug": "debug",
"ext": ".html"
},
"previous": {
"content": "<h2 id=\"site-style\">Site style</h2>\n\n<p>You can override any style with styles defined in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code> files. This is to support config based styling which needs jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add css to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n",
"tags": [],
"name": "custom-styles.md",
"path": "_docs/custom-styles.md",
"url": "/docs/custom-styles.html",
"collection": "docs",
"id": "/docs/custom-styles",
"relative_path": "_docs/custom-styles.md",
"next": {
"tags": [],
"name": "github-action.md",
"path": "_docs/github-action.md",
"url": "/docs/github-action.html",
"collection": "docs",
"id": "/docs/github-action",
"relative_path": "_docs/github-action.md",
"title": "Using with a GitHub action",
"date": "2025-07-25 01:49:18 +0000",
"categories": [
"Advanced"
],
"draft": false,
"layout": "docs",
"image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 100,
"category": "Advanced",
"slug": "github-action",
"ext": ".md"
},
"previous": {
"tags": [],
"name": "post-timeline.md",
"path": "_docs/includes/post-timeline.md",
"url": "/docs/includes/post-timeline.html",
"collection": "docs",
"id": "/docs/includes/post-timeline",
"relative_path": "_docs/includes/post-timeline.md",
"title": "Post Timeline",
"date": "2025-07-25 01:49:18 +0000",
"categories": [
"includes"
],
"draft": false,
"layout": "docs",
"image": "/assets/img/default.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"category": "includes",
"order": 42,
"slug": "post-timeline",
"ext": ".md"
},
"excerpt": "<h2 id=\"site-style\">Site style</h2>\n",
"title": "Custom styles",
"date": "2025-07-25 01:49:18 +0000",
"output": "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Custom styles | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Custom styles\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"Site style\" />\n<meta property=\"og:description\" content=\"Site style\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\" />\n<meta property=\"twitter:title\" content=\"Custom styles\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"Site style\",\"headline\":\"Custom styles\",\"image\":\"https://primerpages.github.io/jekyll-theme-profile/assets/img/default.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/custom-styles.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Custom styles</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <h2 id=\"site-style\">Site style</h2>\n\n<p>You can override any style with styles defined in <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.css</code> or <code class=\"language-plaintext highlighter-rouge\">/assets/css/style.scss</code> files. This is to support config based styling which needs jekyll variables.</p>\n\n<h2 id=\"page-style\">Page style</h2>\n\n<p>You can add css to any page through the <code class=\"language-plaintext highlighter-rouge\">css_style</code> variable in front matter.</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"nn\">---</span>\n<span class=\"na\">css_style</span><span class=\"pi\">:</span> <span class=\"pi\">|</span>\n <span class=\"s\">.Link-btn {</span>\n <span class=\"s\">background: rgba(0.1, 0.1, 0.1, 0.4);</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n <span class=\"s\">h1 {</span>\n <span class=\"s\">color: #FFFF;</span>\n <span class=\"s\">}</span>\n<span class=\"s\">---</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\"\n aria-disabled=\"false\">Post Timeline</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/github-action.html\"\n aria-disabled=\"false\">Using with a GitH...</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/custom-styles.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n <div class=\"position-sticky top-12 ml-5 pb-5\">\n <h4 class=\"ml-3 mb-1\">In this article</h4>\n <ul id=\"toc\" class=\"section-nav\">\n<li class=\"toc-entry toc-h2\"><a href=\"#site-style\">Site style</a></li>\n<li class=\"toc-entry toc-h2\"><a href=\"#page-style\">Page style</a></li>\n</ul>\n </div>\n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"categories": [
"Advanced"
],
"draft": false,
"layout": "docs",
"image": "/assets/img/default.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 100,
"category": "Advanced",
"slug": "custom-styles",
"ext": ".md"
},
"excerpt": "<p>You can also use this with GitHub actions. Below is a typical workflow file</p>\n",
"title": "Using with a GitHub action",
"date": "2025-07-25 01:49:18 +0000",
"output": "\n<!doctype html>\n<html lang=\"en\" data-color-mode=\"auto\" data-light-theme=\"light\" data-dark-theme=\"dark_dimmed\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- HTML Meta Tags -->\n <!-- Begin Jekyll SEO tag v2.8.0 -->\n<title>Using with a GitHub action | Jekyll Theme Profile</title>\n<meta name=\"generator\" content=\"Jekyll v4.4.1\" />\n<meta property=\"og:title\" content=\"Using with a GitHub action\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta name=\"description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<meta property=\"og:description\" content=\"You can also use this with GitHub actions. Below is a typical workflow file\" />\n<link rel=\"canonical\" href=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:url\" content=\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\" />\n<meta property=\"og:site_name\" content=\"Jekyll Theme Profile\" />\n<meta property=\"og:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"article:published_time\" content=\"2025-07-25T01:49:18+00:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta property=\"twitter:image\" content=\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\" />\n<meta property=\"twitter:title\" content=\"Using with a GitHub action\" />\n<script type=\"application/ld+json\">\n{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"dateModified\":\"2025-07-25T01:49:18+00:00\",\"datePublished\":\"2025-07-25T01:49:18+00:00\",\"description\":\"You can also use this with GitHub actions. Below is a typical workflow file\",\"headline\":\"Using with a GitHub action\",\"image\":\"https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"},\"url\":\"https://primerpages.github.io/jekyll-theme-profile/docs/github-action.html\"}</script>\n<!-- End Jekyll SEO tag -->\n\n\n <link href=\"/jekyll-theme-profile/assets/css/theme.css\" rel=\"stylesheet\" type=\"text/css\">\n <link href=\"/jekyll-theme-profile/assets/css/style.css\" rel=\"stylesheet\" type=\"text/css\">\n \n <link rel=\"icon\" type=\"image/x-icon\" href=\"/jekyll-theme-profile/media/appbar-icon.png\">\n\n <script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/theme-toggle.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/anchor-links.js\"></script>\n <script src=\"/jekyll-theme-profile/assets/js/topbar.js\"></script>\n<style>\n</style>\n\n</head>\n\n\n<body class=\"min-height-full d-flex flex-column\">\n \n\n<header class=\"AppHeader position-sticky top-0 z-2 border-bottom topbar\">\n <div class=\"AppHeader-item d-flex flex-justify-between p-2 flex-items-center\">\n <div class=\"d-flex d-sm-none\">\n \n<script>\n $(document).ready(function () {\n const $menu = $(\"#nav-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n<details class=\"details-reset details-overlay\" id=\"nav-menu\">\n <summary class=\"AppHeader-button btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n\n <div class=\"SelectMenu-list\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Appbar</a>\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Sidebar</a>\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"SelectMenu-item\" role=\"menuitem\">Stacked</a>\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"SelectMenu-item\" role=\"menuitem\">Topbar</a>\n <a href=\"/jekyll-theme-profile/docs\" class=\"SelectMenu-item\" role=\"menuitem\" aria-current=\"page\">Documentation</a>\n </div>\n <div class=\"SelectMenu-footer\">\n <div class=\"ActionList-sectionDivider mt-0 mb-1\"></div>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n <div tabindex=\"-1\" class=\"d-flex flex-1 ml-3\" id=\"github-logo\">\n <a href=\"/jekyll-theme-profile/\" class=\"AppHeader-link d-flex flex-items-center no-underline mr-3 h1\">\n <span class=\"octicon octicon-mark-github-24\"></span>\n <span class=\"h4 text-semibold mx-3\">Jekyll Theme Profile</span>\n </a>\n </div>\n <div class=\"AppHeader-item d-flex flex-items-center\">\n <div class=\"Toggle d-flex flex-items-center\">\n <button id=\"theme-toggle\" class=\"btn-octicon mr-2 tooltipped tooltipped-sw\" aria-label=\"Color mode\" type=\"button\"><span id=\"theme-icon\"\n class=\"octicon octicon-moon-24\"></span></button>\n</div>\n\n <div class=\"AppHeader-item hide-sm\">\n \n<div class=\"Repo-info\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile\" class=\"AppHeader-link no-underline tooltipped tooltipped-s\" aria-label=\"Go to repository\">\n <div class=\"d-flex flex-row flex-justify-center Header-item\">\n\n <div class=\"mr-2 h2\"><span class=\"octicon octicon-git-branch-24\"></span></div>\n <div>\n <div>\n PrimerPages/jekyll-theme-profile\n </div>\n <div class=\"d-flex flex-row\">\n <div class=\"mr-3\">\n <span><span class=\"octicon octicon-tag-16\"></span> 2.0.0</span>\n </div>\n \n <div class=\"mr-3\"><span><span class=\"octicon octicon-star-16\"></span> 9</div>\n <div class=\"mr-0\"><span><span class=\"octicon octicon-repo-forked-16\"></span> 1</span></div>\n \n </div>\n </div>\n\n </div>\n </a>\n</div>\n\n </div>\n \n <div class=\"AppHeader-item mr-0\">\n <a href=\"https://github.com/PrimerPages\" class=\"AppHeader-link d-flex flex-items-center\">\n <img class=\"avatar img-cover circle\" height=\"32\" width=\"32\" alt=\"Jekyll Theme Profile\"\n src=\"/jekyll-theme-profile/assets/img/user-image.jpg\">\n </a>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-items-center mt-2\">\n <div class=\"AppHeader-item width-full hide-sm\"><nav class=\"UnderlineNav\">\n <ul class=\"UnderlineNav-body flex-row list-style-none\">\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/appbar.html\" class=\"UnderlineNav-item m-2\" >\n Appbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/sidebar.html\" class=\"UnderlineNav-item m-2\" >\n Sidebar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/stacked.html\" class=\"UnderlineNav-item m-2\" >\n Stacked\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/topbar.html\" class=\"UnderlineNav-item m-2\" >\n Topbar\n </a>\n </li>\n <li class=\"d-inline-flex\">\n <a href=\"/jekyll-theme-profile/docs\" class=\"UnderlineNav-item m-2\" aria-current=\"page\">\n Documentation\n </a>\n </li>\n </ul>\n</nav>\n\n </div>\n </div>\n</header>\n\n <div class=\"d-flex flex-1 flex-column\">\n \n\n\n\n\n\n\n<div class=\"d-xl-flex\">\n <div class=\"Layout bgColor-default border-right d-none d-xl-block\">\n <div class=\"Layout-sidebar position-sticky\"\n style=\"top: var(--topbar-height, 150px); height: calc(100vh - var(--topbar-height, 150px));\"\n >\n <nav>\n \n <div class=\"d-none d-xl-block bg-primary overflow-y-auto flex-shrink-0 pb-3\"\n style=\"height: calc(100vh - var(--topbar-height, 150px) - 0px - 0px);\">\n <div class=\"pt-3\">\n <ul data-overflow-nav class=\"menu ActionList border-0 ml-3\">\n <li class=\"h4\">Other\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Documentation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Debug\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Getting started\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Get started\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Theme configuration\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Write a post\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Styles\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Appbar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Sidebar style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Stacked style\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Topbar style\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Layouts\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Home Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Profile Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Linktree Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Docs Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Landing layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginate Timeline Layout\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Repositories Layout\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Plugins\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Pagination\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Tagging\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Category pages\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Includes\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Collection Menu\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Link Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Links\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Paginator Navigation\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Gallery\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Index\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline Card\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Post Timeline\n </li>\n </a>\n \n </ul>\n </li>\n <li class=\"h4\">Advanced\n <ul>\n \n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" >\n Custom styles\n </li>\n </a>\n \n \n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"ActionListItem-label no-underline\">\n <li class=\"menu-item ActionList-item border-0\" \n aria-current=\"page\" >\n Using with a GitHub action\n </li>\n </a>\n \n </ul>\n </li>\n </ul>\n </div>\n </div>\n </nav>\n </div>\n </div>\n <div class=\"container-xl flex-1 p-responsive pb-6\">\n <div class=\"py-4 d-flex\">\n <div class=\"d-xl-none\">\n \n\n\n<script>\n $(document).ready(function () {\n const $menu = $(\"#collection-menu\");\n const $closeButton = $(\".close-menu\");\n\n if ($menu.length && $closeButton.length) {\n $closeButton.click(() => $menu.removeAttr(\"open\")); // Properly closes the dropdown\n }\n });\n</script>\n\n<details class=\"details-reset details-overlay\" id=\"collection-menu\">\n <summary class=\"btn btn-invisible\" aria-haspopup=\"true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6H20M4 12H20M4 18H20\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n </summary>\n <details-menu class=\"SelectMenu\" role=\"menu\">\n <div class=\"SelectMenu-modal\">\n\n <div class=\"SelectMenu-header\">\n <div tabindex=\"-1\" class=\"SelectMenu-title\" id=\"github-logo\">\n <div class=\"AppHeader-link d-flex flex-items-center no-underline mr-3\">\n <span class=\"h3 color-fg-default text-bold\">docs</span>\n </div>\n </div>\n <div class=\"d-flex flex-justify-end\">\n <button class=\"SelectMenu-closeButton close-menu\" type=\"button\">\n <span class=\"octicon octicon-x-16\"></span>\n </button>\n </div>\n </div>\n <div class=\"SideNav border overflow-y-auto\">\n <div class=\"SideNav-item no-underline h4\">Docs</div>\n <a href=\"/jekyll-theme-profile/docs/index.html\" class=\"SideNav-item\" role=\"menuitem\" >Documentation</a>\n <a href=\"/jekyll-theme-profile/docs/debug.html\" class=\"SideNav-item\" role=\"menuitem\" >Debug</a>\n <div class=\"SideNav-item no-underline h4\">Getting started</div>\n <a href=\"/jekyll-theme-profile/docs/get-started.html\" class=\"SideNav-item\" role=\"menuitem\" >Get started</a>\n <a href=\"/jekyll-theme-profile/docs/configuration.html\" class=\"SideNav-item\" role=\"menuitem\" >Theme configuration</a>\n <a href=\"/jekyll-theme-profile/docs/posts.html\" class=\"SideNav-item\" role=\"menuitem\" >Write a post</a>\n <div class=\"SideNav-item no-underline h4\">Styles</div>\n <a href=\"/jekyll-theme-profile/docs/styles/appbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Appbar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/sidebar.html\" class=\"SideNav-item\" role=\"menuitem\" >Sidebar style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/stacked.html\" class=\"SideNav-item\" role=\"menuitem\" >Stacked style</a>\n <a href=\"/jekyll-theme-profile/docs/styles/topbar.html\" class=\"SideNav-item\" role=\"menuitem\" >Topbar style</a>\n <div class=\"SideNav-item no-underline h4\">Layouts</div>\n <a href=\"/jekyll-theme-profile/docs/layouts/home.html\" class=\"SideNav-item\" role=\"menuitem\" >Home Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/profile.html\" class=\"SideNav-item\" role=\"menuitem\" >Profile Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/linktree.html\" class=\"SideNav-item\" role=\"menuitem\" >Linktree Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/docs.html\" class=\"SideNav-item\" role=\"menuitem\" >Docs Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/landing.html\" class=\"SideNav-item\" role=\"menuitem\" >Landing layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/paginate_timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginate Timeline Layout</a>\n <a href=\"/jekyll-theme-profile/docs/layouts/repositories.html\" class=\"SideNav-item\" role=\"menuitem\" >Repositories Layout</a>\n <div class=\"SideNav-item no-underline h4\">Plugins</div>\n <a href=\"/jekyll-theme-profile/docs/plugins/pagination.html\" class=\"SideNav-item\" role=\"menuitem\" >Pagination</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/tagging.html\" class=\"SideNav-item\" role=\"menuitem\" >Tagging</a>\n <a href=\"/jekyll-theme-profile/docs/plugins/category-pages.html\" class=\"SideNav-item\" role=\"menuitem\" >Category pages</a>\n <div class=\"SideNav-item no-underline h4\">Includes</div>\n <a href=\"/jekyll-theme-profile/docs/includes/collection-menu.html\" class=\"SideNav-item\" role=\"menuitem\" >Collection Menu</a>\n <a href=\"/jekyll-theme-profile/docs/includes/link-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Link Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/links.html\" class=\"SideNav-item\" role=\"menuitem\" >Links</a>\n <a href=\"/jekyll-theme-profile/docs/includes/paginator-nav.html\" class=\"SideNav-item\" role=\"menuitem\" >Paginator Navigation</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-gallery.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Gallery</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-index.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Index</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline-card.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline Card</a>\n <a href=\"/jekyll-theme-profile/docs/includes/post-timeline.html\" class=\"SideNav-item\" role=\"menuitem\" >Post Timeline</a>\n <div class=\"SideNav-item no-underline h4\">Advanced</div>\n <a href=\"/jekyll-theme-profile/docs/custom-styles.html\" class=\"SideNav-item\" role=\"menuitem\" >Custom styles</a>\n <a href=\"/jekyll-theme-profile/docs/github-action.html\" class=\"SideNav-item\" role=\"menuitem\" aria-current=\"page\" >Using with a GitHub action</a>\n </div>\n </div>\n </details-menu>\n</details>\n\n </div>\n \n<div class=\"Breadcrumb d-flex flex-items-center\">\n <nav aria-label=\"Breadcrumb\" class=\"f5\">\n <ol class=\"breadcrumb\">\n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/\">home</a>\n </li>\n\n \n <li class=\"breadcrumb-item\">\n <a href=\"/jekyll-theme-profile/docs\">docs</a>\n </li>\n </ol>\n </nav>\n</div>\n\n </div>\n <div class=\"pb-5 p-responsive\">\n <h1 class=\"border-bottom-0\">Using with a GitHub action</h1>\n <h3 class=\"f3 color-fg-muted pb-3\"></h3>\n </div>\n <div class=\"d-flex flex-wrap-reverse\">\n <div class=\"col-12 col-md-8 markdown-body p-responsive\">\n <p>You can also use this with GitHub actions. Below is a typical workflow file</p>\n\n<div class=\"language-yaml highlighter-rouge\"><div class=\"highlight\"><pre class=\"highlight\"><code><span class=\"c1\"># Sample workflow for building and deploying a Jekyll site to GitHub Pages</span>\n<span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Docs</span>\n\n<span class=\"na\">on</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Runs on pushes targeting the default branch</span>\n <span class=\"na\">push</span><span class=\"pi\">:</span>\n <span class=\"na\">branches</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"s2\">\"</span><span class=\"s\">main\"</span><span class=\"pi\">]</span>\n\n <span class=\"c1\"># Run on every pull request</span>\n <span class=\"na\">pull_request</span><span class=\"pi\">:</span>\n <span class=\"na\">types</span><span class=\"pi\">:</span> <span class=\"pi\">[</span><span class=\"nv\">opened</span><span class=\"pi\">,</span> <span class=\"nv\">reopened</span><span class=\"pi\">,</span> <span class=\"nv\">synchronize</span> <span class=\"pi\">]</span>\n\n <span class=\"c1\"># Allows you to run this workflow manually from the Actions tab</span>\n <span class=\"na\">workflow_dispatch</span><span class=\"pi\">:</span>\n\n <span class=\"na\">schedule</span><span class=\"pi\">:</span>\n <span class=\"c1\"># This will refresh your repositories and other user information every day</span>\n <span class=\"c1\"># * is a special character in YAML so you have to quote this string</span>\n <span class=\"c1\"># Generate from https://crontab.guru/</span>\n <span class=\"c1\"># ┌───────────── minute (0 - 59)</span>\n <span class=\"c1\"># │ ┌───────────── hour (0 - 23)</span>\n <span class=\"c1\"># │ │ ┌───────────── day of the month (1 - 31)</span>\n <span class=\"c1\"># │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)</span>\n <span class=\"c1\"># │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># │ │ │ │ │</span>\n <span class=\"c1\"># * * * * *</span>\n <span class=\"pi\">-</span> <span class=\"na\">cron</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">0</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*</span><span class=\"nv\"> </span><span class=\"s\">*\"</span>\n\n<span class=\"c1\"># Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages</span>\n<span class=\"na\">permissions</span><span class=\"pi\">:</span>\n <span class=\"na\">contents</span><span class=\"pi\">:</span> <span class=\"s\">read</span> <span class=\"c1\"># needed to read your repository</span>\n <span class=\"na\">pages</span><span class=\"pi\">:</span> <span class=\"s\">write</span> <span class=\"c1\"># needed to enable and deploy github pages</span>\n <span class=\"na\">id-token</span><span class=\"pi\">:</span> <span class=\"s\">write</span>\n\n<span class=\"c1\"># Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.</span>\n<span class=\"c1\"># However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.</span>\n<span class=\"na\">concurrency</span><span class=\"pi\">:</span>\n <span class=\"na\">group</span><span class=\"pi\">:</span> <span class=\"s2\">\"</span><span class=\"s\">pages\"</span>\n <span class=\"na\">cancel-in-progress</span><span class=\"pi\">:</span> <span class=\"kc\">false</span>\n\n<span class=\"na\">jobs</span><span class=\"pi\">:</span>\n <span class=\"c1\"># Build job</span>\n <span class=\"na\">build</span><span class=\"pi\">:</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Checkout</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/checkout@v3</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Ruby</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">ruby/setup-ruby@v1.152.0</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">bundler-cache</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># runs 'bundle install' and caches installed gems automatically</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Setup Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">pages</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/configure-pages@v3</span>\n <span class=\"na\">with</span><span class=\"pi\">:</span>\n <span class=\"na\">enablement</span><span class=\"pi\">:</span> <span class=\"kc\">true</span> <span class=\"c1\"># Enable github pages if it's not</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Build</span>\n <span class=\"na\">run</span><span class=\"pi\">:</span> <span class=\"s\">bundle exec jekyll build</span>\n <span class=\"na\">env</span><span class=\"pi\">:</span>\n <span class=\"na\">JEKYLL_ENV</span><span class=\"pi\">:</span> <span class=\"s\">production</span>\n <span class=\"na\">JEKYLL_GITHUB_TOKEN</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Upload artifact</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/upload-pages-artifact@v3</span>\n\n <span class=\"c1\"># Deployment job</span>\n <span class=\"na\">deploy</span><span class=\"pi\">:</span>\n <span class=\"na\">if</span><span class=\"pi\">:</span> <span class=\"s\">github.ref == 'refs/heads/main'</span> <span class=\"c1\"># Only deploy from the main branch</span>\n <span class=\"na\">environment</span><span class=\"pi\">:</span>\n <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">github-pages</span>\n <span class=\"na\">url</span><span class=\"pi\">:</span> <span class=\"s\">$</span>\n <span class=\"na\">runs-on</span><span class=\"pi\">:</span> <span class=\"s\">ubuntu-latest</span>\n <span class=\"na\">needs</span><span class=\"pi\">:</span> <span class=\"s\">build</span>\n <span class=\"na\">steps</span><span class=\"pi\">:</span>\n <span class=\"pi\">-</span> <span class=\"na\">name</span><span class=\"pi\">:</span> <span class=\"s\">Deploy to GitHub Pages</span>\n <span class=\"na\">id</span><span class=\"pi\">:</span> <span class=\"s\">deployment</span>\n <span class=\"na\">uses</span><span class=\"pi\">:</span> <span class=\"s\">actions/deploy-pages@v4</span>\n\n</code></pre></div></div>\n\n\n <!-- Pagination links -->\n <div class=\"paginate-container py-3\">\n <div role=\"navigation\" aria-label=\"Pagination\" class=\"d-inline-block pagination\">\n \n <a class=\"previous_page\" rel=\"prev\" href=\"/jekyll-theme-profile/docs/custom-styles.html\"\n aria-disabled=\"false\">Custom styles</a>\n \n\n \n <a class=\"next_page\" rel=\"next\" href=\"/jekyll-theme-profile/docs/debug.html\"\n aria-disabled=\"false\">Debug</a>\n \n </div>\n </div>\n\n <!-- Edit link -->\n \n <div class=\"doc-footer border-top my-8 py-5\">\n <a href=\"https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo/_docs/github-action.md\">\n <span class=\"octicon octicon-pencil-16\"></span>\n Edit this page</a>\n </div>\n \n </div>\n <div class=\"col-12 col-md-4 markdown-body\">\n \n \n </div>\n </div>\n </div>\n</div>\n\n </div><footer>\n <div class=\"footer py-3 color-bg-subtle border-top\">\n <div class=\"container-xl p-responsive-blog f6 py-4 d-sm-flex flex-justify-between flex-row-reverse flex-items-center\">\n <div class=\"flex-1\"></div>\n <div class=\"flex-0 mx-auto px-4\">\n <div>Made with <a href=\"https://www.althack.dev/jekyll-theme-profile/\">jekyll theme profile</a></div>\n </div>\n </div>\n </div>\n</footer>\n\n</body>\n\n</html>\n",
"categories": [
"Advanced"
],
"draft": false,
"layout": "docs",
"image": "https://raw.githubusercontent.com/PrimerPages/jekyll-theme-profile/main/screenshot.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 100,
"category": "Advanced",
"slug": "github-action",
"ext": ".md"
},
"excerpt": "<h1 id=\"jekyll-version\">Jekyll version</h1>\n<pre>4.4.1</pre>",
"title": "Debug",
"date": "2025-07-25 01:49:18 +0000",
"output": null,
"categories": [],
"draft": false,
"layout": "docs",
"image": "/assets/img/default.png",
"permalink": "/docs/:path:output_ext",
"edit_url": "https://github.com/PrimerPages/jekyll-theme-profile/edit/main/demo",
"default_category": "Other",
"toc": true,
"order": 200,
"slug": "debug",
"ext": ".html"
}
