Jekyll Setup

Monday. June 27, 2022 - 299 mins

Jekyll

Setup

Install ruby and gem
```
  sudo apt install ruby gem 
```
install jekyll and bundler for to create site
```
  gem install jekyll bundler
```
create new site
```
  jekyll new {website_name}
```

run site locally

  bundle exec jekyll serve {--livereload}

if webrick error add
```
  gem "webrick"
```
to the Gemfile and run
```
  bundle install
```

_posts

contains all the blog posts written in md.

_site

folder structure to host site independently(on a server)

_drafts

contains drafts of blog posts

jekyll serve --draft

Doesn’t have to name a draft in a special convention with date. will be assigned the last edited.

Blog post

---
layout: post
title:  "HELLO to Jekyll!"
date:   2022-06-27 18:41:19 +0530
categories: jekyll delete
author: "Akilax0"

---

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.

Jekyll requires blog post files to be named according to the following format:

`YEAR-MONTH-DAY-title.MARKUP`

Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:


<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>


Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].

[jekyll-docs]: https://jekyllrb.com/docs/home
[jekyll-gh]:   https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/\

The first lines contains the parameters for the post which will be used by the page generator. The pages are named in given format so they can be built with given permalink and design.

Creating Page

Pages on website not a blog.

Ex : about.md

created at root or at given dir. Same as conventional sites.

Permalinks

Can see the folder structure at _site

categories depend on front matter. can define a permalink to regardless.

permalink: "/new-url/test"

uses this instead of date. Can also use variables from the front matter.

permalink: "/:categories/:year/:month/:day/:title"

recommend to use for each page.

Default Front matter

The default yaml even without typing them in individually.

Edit the _config.yml file with

#Defaults 
defaults:
  - 
    scope:
      path: ""
      type: "posts"
    values: 
        #values
        layout: "post"

Here we define a scope for the defaults.

path : defines which files under path defined would get effected. based on the site structue.

type : based on the type defined in the front matter.

values : defines the attributes to be added.

→ Restart server after editting _config.yaml

Themes

Install themes from

https://rubygems.org/

add theme to Gemfille and run

bundle install

Change the theme in _config.yaml

→ might want to edit the layouts to according to the _layouts available in the theme

Layouts

can define layouts under the directory

_layouts

this will override or create new layouts to be used by the pages.

---
layout: "page"
--- 

<h1>This is a post</h1>
<hr>

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=author content="Akilax0">

    <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Markdown Extra Components | Akilax0</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Markdown Extra Components" />
<meta name="author" content="jamesfoster" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Markdown summary with different options" />
<meta property="og:description" content="Markdown summary with different options" />
<link rel="canonical" href="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:url" content="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:site_name" content="Akilax0" />
<meta property="og:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2016-02-24T22:48:00+00:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="twitter:title" content="Markdown Extra Components" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"jamesfoster"},"dateModified":"2016-02-24T22:48:00+00:00","datePublished":"2016-02-24T22:48:00+00:00","description":"Markdown summary with different options","headline":"Markdown Extra Components","image":"https://akilax0.xyz//assets/images/markdown.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://akilax0.xyz//markdown-extra-components/"},"url":"https://akilax0.xyz//markdown-extra-components/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

    <link rel="alternate" type="application/rss+xml" title="Akilax0" href="https://akilax0.xyz//feed.xml" />

    <script>window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-f.fontawesome.com","baseUrlKit":"https://kit.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"id":7821852,"license":"free","method":"js","minify":{"enabled":true},"token":"d9b09040a7","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"v5FontFaceShim":{"enabled":true},"version":"6.4.2"};!function(t){"function"==typeof define&&define.amd?define("kit-loader",t):t()}((function(){"use strict";function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function e(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?t(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e,n){return(e=function(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,c,a=[],u=!0,f=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(a.push(r.value),a.length!==e);u=!0);}catch(t){f=!0,o=t}finally{try{if(!u&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(f)throw o}}return a}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){var n=e&&e.addOn||"",r=e&&e.baseFilename||t.license+n,o=e&&e.minify?".min":"",i=e&&e.fileSuffix||t.method,c=e&&e.subdir||t.method;return t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/"+c+"/"+r+o+"."+i}function a(t,e){var n=e||["fa"],r="."+Array.prototype.join.call(n,",."),o=t.querySelectorAll(r);Array.prototype.forEach.call(o,(function(e){var n=e.getAttribute("title");e.setAttribute("aria-hidden","true");var r=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only");if(n&&r){var o=t.createElement("span");o.innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling)}}))}var u,f=function(){},s="undefined"!=typeof global&&void 0!==global.process&&"function"==typeof global.process.emit,l="undefined"==typeof setImmediate?setTimeout:setImmediate,d=[];function h(){for(var t=0;t<d.length;t++)d[t][0](d[t][1]);d=[],u=!1}function m(t,e){d.push([t,e]),u||(u=!0,l(h,0))}function p(t){var e=t.owner,n=e._state,r=e._data,o=t[n],i=t.then;if("function"==typeof o){n="fulfilled";try{r=o(r)}catch(t){g(i,t)}}v(i,r)||("fulfilled"===n&&b(i,r),"rejected"===n&&g(i,r))}function v(t,e){var r;try{if(t===e)throw new TypeError("A promises callback cannot return that same promise.");if(e&&("function"==typeof e||"object"===n(e))){var o=e.then;if("function"==typeof o)return o.call(e,(function(n){r||(r=!0,e===n?y(t,n):b(t,n))}),(function(e){r||(r=!0,g(t,e))})),!0}}catch(e){return r||g(t,e),!0}return!1}function b(t,e){t!==e&&v(t,e)||y(t,e)}function y(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(A,t))}function g(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(S,t))}function w(t){t._then=t._then.forEach(p)}function A(t){t._state="fulfilled",w(t)}function S(t){t._state="rejected",w(t),!t._handled&&s&&global.process.emit("unhandledRejection",t._data,t)}function O(t){global.process.emit("rejectionHandled",t)}function j(t){if("function"!=typeof t)throw new TypeError("Promise resolver "+t+" is not a function");if(this instanceof j==!1)throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._then=[],function(t,e){function n(t){g(e,t)}try{t((function(t){b(e,t)}),n)}catch(t){n(t)}}(t,this)}j.prototype={constructor:j,_state:"pending",_then:null,_data:void 0,_handled:!1,then:function(t,e){var n={owner:this,then:new this.constructor(f),fulfilled:t,rejected:e};return!e&&!t||this._handled||(this._handled=!0,"rejected"===this._state&&s&&m(O,this)),"fulfilled"===this._state||"rejected"===this._state?m(p,n):this._then.push(n),n.then},catch:function(t){return this.then(null,t)}},j.all=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.all().");return new j((function(e,n){var r=[],o=0;function i(t){return o++,function(n){r[t]=n,--o||e(r)}}for(var c,a=0;a<t.length;a++)(c=t[a])&&"function"==typeof c.then?c.then(i(a),n):r[a]=c;o||e(r)}))},j.race=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.race().");return new j((function(e,n){for(var r,o=0;o<t.length;o++)(r=t[o])&&"function"==typeof r.then?r.then(e,n):e(r)}))},j.resolve=function(t){return t&&"object"===n(t)&&t.constructor===j?t:new j((function(e){e(t)}))},j.reject=function(t){return new j((function(e,n){n(t)}))};var E="function"==typeof Promise?Promise:j;function P(t,e){var n=e.fetch,r=e.XMLHttpRequest,o=e.token,i=t;return o&&!function(t){return t.indexOf("kit-upload.css")>-1}(t)&&("URLSearchParams"in window?(i=new URL(t)).searchParams.set("token",o):i=i+"?token="+encodeURIComponent(o)),i=i.toString(),new E((function(t,e){if("function"==typeof n)n(i,{mode:"cors",cache:"default"}).then((function(t){if(t.ok)return t.text();throw new Error("")})).then((function(e){t(e)})).catch(e);else if("function"==typeof r){var o=new r;o.addEventListener("loadend",(function(){this.responseText?t(this.responseText):e(new Error(""))}));["abort","error","timeout"].map((function(t){o.addEventListener(t,(function(){e(new Error(""))}))})),o.open("GET",i),o.send()}else{e(new Error(""))}}))}function _(t,e,n){var r=t;return[[/(url\("?)\.\.\/\.\.\/\.\./g,function(t,n){return"".concat(n).concat(e)}],[/(url\("?)\.\.\/webfonts/g,function(t,r){return"".concat(r).concat(e,"/releases/v").concat(n,"/webfonts")}],[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g,function(t,n){return"".concat(n).concat(e)}]].forEach((function(t){var e=o(t,2),n=e[0],i=e[1];r=r.replace(n,i)})),r}function F(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=n.document||o,i=a.bind(a,o,["fa","fab","fas","far","fal","fad","fak"]);t.autoA11y.enabled&&r(i);var u=t.subsetPath&&t.baseUrl+"/"+t.subsetPath,f=[{id:"fa-main",addOn:void 0,url:u}];if(t.v4shim&&t.v4shim.enabled&&f.push({id:"fa-v4-shims",addOn:"-v4-shims"}),t.v5FontFaceShim&&t.v5FontFaceShim.enabled&&f.push({id:"fa-v5-font-face",addOn:"-v5-font-face"}),t.v4FontFaceShim&&t.v4FontFaceShim.enabled&&f.push({id:"fa-v4-font-face",addOn:"-v4-font-face"}),!u&&t.customIconsCssPath){var s=t.customIconsCssPath.indexOf("kit-upload.css")>-1?t.baseUrlKit:t.baseUrl,l=s+"/"+t.customIconsCssPath;f.push({id:"fa-kit-upload",url:l})}var d=f.map((function(r){return new E((function(o,i){var a=r.url||c(t,{addOn:r.addOn,minify:t.minify.enabled}),u={id:r.id},f=t.subset?u:e(e(e({},n),u),{},{baseUrl:t.baseUrl,version:t.version,id:r.id,contentFilter:function(t,e){return _(t,e.baseUrl,e.version)}});P(a,n).then((function(t){o(C(t,f))})).catch(i)}))}));return E.all(d)}function C(t,e){var n=e.contentFilter||function(t,e){return t},r=document.createElement("style"),o=document.createTextNode(n(t,e));return r.appendChild(o),r.media="all",e.id&&r.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&r.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),r}function I(t,n){n.autoA11y=t.autoA11y.enabled,"pro"===t.license&&(n.autoFetchSvg=!0,n.fetchSvgFrom=t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/svgs",n.fetchUploadedSvgFrom=t.uploadsUrl);var r=[];return t.v4shim.enabled&&r.push(new E((function(r,o){P(c(t,{addOn:"-v4-shims",minify:t.minify.enabled}),n).then((function(t){r(U(t,e(e({},n),{},{id:"fa-v4-shims"})))})).catch(o)}))),r.push(new E((function(r,o){P(t.subsetPath&&t.baseUrl+"/"+t.subsetPath||c(t,{minify:t.minify.enabled}),n).then((function(t){var o=U(t,e(e({},n),{},{id:"fa-main"}));r(function(t,e){var n=e&&void 0!==e.autoFetchSvg?e.autoFetchSvg:void 0,r=e&&void 0!==e.autoA11y?e.autoA11y:void 0;void 0!==r&&t.setAttribute("data-auto-a11y",r?"true":"false");n&&(t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),t.setAttribute("data-fetch-svg-from",e.fetchSvgFrom),t.setAttribute("data-fetch-uploaded-svg-from",e.fetchUploadedSvgFrom));return t}(o,n))})).catch(o)}))),E.all(r)}function U(t,e){var n=document.createElement("SCRIPT"),r=document.createTextNode(t);return n.appendChild(r),n.referrerPolicy="strict-origin",e.id&&n.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n}function T(t){var e,n=[],r=document,o=r.documentElement.doScroll,i=(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);i||r.addEventListener("DOMContentLoaded",e=function(){for(r.removeEventListener("DOMContentLoaded",e),i=1;e=n.shift();)e()}),i?setTimeout(t,0):n.push(t)}function L(t){"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})}try{if(window.FontAwesomeKitConfig){var k=window.FontAwesomeKitConfig,x={detectingConflicts:k.detectConflictsUntil&&new Date<=new Date(k.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",fetch:window.fetch,token:k.token,XMLHttpRequest:window.XMLHttpRequest,document:document},M=document.currentScript,N=M?M.parentElement:document.head;(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"js"===t.method?I(t,e):"css"===t.method?F(t,e,(function(t){T(t),L(t)})):void 0})(k,x).then((function(t){t.map((function(t){try{N.insertBefore(t,M?M.nextSibling:null)}catch(e){N.appendChild(t)}})),x.detectingConflicts&&M&&T((function(){M.setAttributeNode(document.createAttribute(x.detectionIgnoreAttr));var t=function(t,e){var n=document.createElement("script");return e&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n.src=c(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),n}(k,x);document.body.appendChild(t)}))})).catch((function(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}))}}catch(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}}));</script>
    <style>
    
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:purple;font-weight:bold}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kn{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .n{color:#333}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.highlight .gc{color:#999;background-color:#EAF2F5}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#666;background:#fff}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#222;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:indigo;text-decoration:underline;font-weight:300}p{line-height:1.7;color:#666;font-weight:300;margin-bottom:20px;letter-spacing:.4px}@media only screen and (max-width: 400px){p{letter-spacing:.2px}}strong{font-weight:400;color:#000}ul li,ol li{line-height:2.4rem;font-weight:300;color:#666}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#575757;font-weight:300}@media only screen and (max-width: 400px){figcaption{font-size:1.2rem}}blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#fff;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#fff;border:1px solid #ededed;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}@media only screen and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:indigo}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#666}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#575757;font-weight:300;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#ededed;color:#666;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#ededed;color:#666;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:indigo}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#666}.author{padding:3rem 0;border-bottom:1px solid #ededed;border-top:1px solid #ededed;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}@media only screen and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#575757;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}@media only screen and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}.author>.toleft{width:10%;display:inline-block}@media only screen and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}.author>.toright{width:89%;display:inline-block;vertical-align:top}@media only screen and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #ededed;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#575757;font-weight:300;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#575757 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:indigo !important}.footer-main>.extra{color:#575757;margin-top:0;font-weight:300}.footer-main>.extra>.link{color:#222;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#575757}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:300;font-style:normal;color:#575757;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:300;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#666}.evidence{background-image:linear-gradient(to bottom, #27f36a26, #27f36a26);color:#222}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#27f36a26, #27f36a26)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#000;text-align:center;color:#575757;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:300}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}@media only screen and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#575757;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:300}.share{float:right;width:40%;display:inline;text-align:right;position:relative}@media only screen and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}@media only screen and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#fff;position:relative;top:0;margin:0;margin-right:4px;display:inherit}@media only screen and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}@media only screen and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}@media only screen and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#000}.social-links>.link:hover>svg{color:indigo}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}@media (prefers-color-scheme: dark){/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */;html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .hll{background-color:#272822}.highlight .c{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .c1{color:#75715e}.highlight .cs{color:#75715e}.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .il{color:#ae81ff}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#aaa;background:#000}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#ededed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#ededed;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:#9300ff;text-decoration:underline;font-weight:400}p{line-height:1.7;color:#aaa;font-weight:300;margin-bottom:20px;letter-spacing:.4px}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){p{letter-spacing:.2px}}@media (prefers-color-scheme: dark){strong{font-weight:400;color:#fff}ul li,ol li{line-height:2.4rem;font-weight:300;color:#aaa}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#999;font-weight:300}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){figcaption{font-size:1.2rem}}@media (prefers-color-scheme: dark){blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#000;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#000;border:1px solid #222;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}@media (prefers-color-scheme: dark){.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:#9300ff}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#aaa}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#999;font-weight:400;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#222;color:#aaa;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#222;color:#aaa;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:#9300ff}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#aaa}.author{padding:3rem 0;border-bottom:1px solid #222;border-top:1px solid #222;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;color:#999;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toleft{width:10%;display:inline-block}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}@media (prefers-color-scheme: dark){.author>.toright{width:89%;display:inline-block;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}@media (prefers-color-scheme: dark){.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #222;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#999;font-weight:400;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#999 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:#9300ff !important}.footer-main>.extra{color:#999;margin-top:0;font-weight:400}.footer-main>.extra>.link{color:#ededed;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#999}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:400;font-style:normal;color:#999;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:400;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#aaa}.evidence{background-image:linear-gradient(to bottom, #1E2D24, #1E2D24);color:#ededed}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#1E2D24, #1E2D24)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#fff;text-align:center;color:#999;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:400}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media (prefers-color-scheme: dark){.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#999;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:400}.share{float:right;width:40%;display:inline;text-align:right;position:relative}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media (prefers-color-scheme: dark){.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media (prefers-color-scheme: dark){.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#000;position:relative;top:0;margin:0;margin-right:4px;display:inherit}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}@media (prefers-color-scheme: dark){.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#fff}.social-links>.link:hover>svg{color:#9300ff}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}}

    </style>

</head>
<body>
    <div class="wrapper-normal">
        
            <div class="post">
        
<nav class="nav">
    <ul class="list">
        
            <li class="item">
                <a class="link" href="https://akilax0.xyz//">Home</a>
            </li>
        
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//blog">Blog</a>
                </li>
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//projects">Projects</a>
                </li>
            
        <!-- 
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//about">About</a>
                </li>
            
         -->

            <li class="item">
                <a class="link" href="https://akilax0.xyz/assets/files/AkilaCV.pdf">CV</a>
            </li>
        
    </ul>
</nav>

<h1 class="title">Markdown Extra Components</h1>

<span class="date">
    <time datetime="24-02-2016">Wednesday. February 24, 2016</time>
     - <span class="reading-time" title="Estimated read time">
    
        5 mins
    
</span>

</span>

    <div class="post-tags">
        
            <a class="item" href="https://akilax0.xyz//tags/#markdown">markdown</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#components">components</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#extra">extra</a>
        
    </div>

<h2 id="summary">Summary:</h2>

<p>You can pick as item to see how to apply in markdown.</p>

<h4 id="especial-elements">Especial Elements</h4>
<ul>
  <li><a href="#evidence">Evidence</a></li>
  <li><a href="#side-by-side">Side-by-Side</a></li>
  <li><a href="#star">Star</a></li>
  <li><a href="#especial-breaker">Especial Breaker</a></li>
  <li><a href="#spoiler">Spoiler</a></li>
</ul>

<h4 id="external-elements">External Elements</h4>
<ul>
  <li><a href="#gist">Gist</a></li>
  <li><a href="#codepen">Codepen</a></li>
  <li><a href="#slideshare">Slideshare</a></li>
  <li><a href="#videos">Videos</a></li>
</ul>

<hr />

<h2 id="evidence">Evidence</h2>

<p>You can try the evidence!</p>

<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">&gt;</span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt">&lt;/span&gt;</span></code></pre></figure>

<hr />

<h2 id="side-by-side">Side-by-side</h2>

<p>Like the <a href="https://medium.com/">Medium</a> component.</p>

<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

<hr />

<h2 id="star">Star</h2>

<p>You can give evidence to a post. Just add the tag to the markdown file.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>

<hr />

<h2 id="especial-breaker">Especial Breaker</h2>

<p>You can add a especial <em>hr</em> to your text.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="breaker"></div>

<hr />

<h2 id="spoiler">Spoiler</h2>

<p>You can add an especial hidden content that appears on hover.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">&gt;&lt;p&gt;</span>your content<span class="nt">&lt;/p&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

<hr />

<h2 id="gist">Gist</h2>

<p>You can add Gists from github.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>

<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>

<hr />

<h2 id="codepen">Codepen</h2>

<p>You can add Pens from Codepen.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">&gt;</span>
    See the Pen <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">&gt;</span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt">&lt;/a&gt;</span> by Chris Coyier (<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">&gt;</span>@chriscoyier<span class="nt">&lt;/a&gt;</span>) on <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">&gt;</span>CodePen<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>

<hr />

<h2 id="slideshare">Slideshare</h2>

<p>Add your presentations here!</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;</span> <span class="nt">&lt;/iframe&gt;</span></code></pre></figure>

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>

<hr />

<h2 id="videos">Videos</h2>

<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>

<p><strong>Example</strong></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span></code></pre></figure>

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>

    <div class="blog-navigation">
        
            <a class="prev" href="https://akilax0.xyz//markdown-common-elements/">&laquo; Markdown Common Elements</a>
        
            <a class="next" href="https://akilax0.xyz//welcome-to-jekyll/">Jekyll Setup &raquo;</a>
        
    </div>

    <div class="related">
    
                    <h4>Related Posts</h4>
                    <ul>
                    
                    <li class="relatedPost">
                        <a href="https://akilax0.xyz//markdown-common-elements/">Markdown Common Elements
                        
                        </a>
                    </li>
                    
        </ul>
    
</div>

    <section class="author">
    <div class="toleft">
        <img
            class="selfie"
            src="https://akilax0.xyz//"
            alt=""
        />
    </div>

    <div class="toright">
        <h4 class="name"></h4>
        <p class="bio"></p>

        <div class="share">
            <!-- Note: Only use three share links if your site width is set to large -->
            <!-- If site width is set to normal, you may choose any two share links -->
            <a
                class="twitter"
                href="https://twitter.com/intent/tweet?text=https://akilax0.xyz//markdown-extra-components/ - Markdown Extra Components by @"
            >
                <i class="fa-brands fa-twitter"></i>
                <span class="icon-twitter">Tweet</span>
            </a>

            <a
                class="facebook"
                href="javascript:void(0)"
                onclick="window.open('https://facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"
            >
                <i class="fa-brands fa-facebook"></i>
                <span class="icon-facebook-rect">Share</span>
            </a>

            <!-- <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://akilax0.xyz//markdown-extra-components/&amp;title=Markdown Extra Components&amp;summary=Markdown summary with different options&amp;source=https://akilax0.xyz/" target="_blank">
                <i class="fa-brands fa-linkedin"></i>
                <span class="icon-linkedin">Share</span>
            </a> -->
        </div>
    </div>
</section>

    <section class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">

        var disqus_config = function () {
            this.page.url = 'https://akilax0.xyz//markdown-extra-components/';
            this.page.identifier = '/markdown-extra-components';
        };
        var disqus_shortname = 'github';
        var disqus_developer = 0;
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>

<footer class="footer-main">
    Akilax0 © 2024

    <a class="link" href="https://akilax0.xyz//feed.xml" target="_blank" alt="anchor link to rss feed" aria-label="anchor link to rss feed">
        <i class="fa-solid fa-rss"></i>
    </a>

    <p class="extra">
        <a class="link" href="https://github.com/sergiokopplin/indigo">Indigo theme</a>
        by
        <a class="link" href="https://github.com/sergiokopplin/indigo">Kopplin</a>
    </p>
</footer>

            </div>
                </div>
            </div>
    </div>
</body>
</html>

This will put the .md content to the page. Also note that using the layout: page becomes a higher level layout for this layout.

Variables

can be used in the html layout pages

//page level
Akilax0

//layout level


//site level defined in the config.yaml
Akilax0

For adding a title on site

<html>
<head>
    <meta charset="UTF-8">
    <title>Akilax0</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=author content="Akilax0">

    <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Markdown Extra Components | Akilax0</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Markdown Extra Components" />
<meta name="author" content="jamesfoster" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Markdown summary with different options" />
<meta property="og:description" content="Markdown summary with different options" />
<link rel="canonical" href="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:url" content="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:site_name" content="Akilax0" />
<meta property="og:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2016-02-24T22:48:00+00:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="twitter:title" content="Markdown Extra Components" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"jamesfoster"},"dateModified":"2016-02-24T22:48:00+00:00","datePublished":"2016-02-24T22:48:00+00:00","description":"Markdown summary with different options","headline":"Markdown Extra Components","image":"https://akilax0.xyz//assets/images/markdown.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://akilax0.xyz//markdown-extra-components/"},"url":"https://akilax0.xyz//markdown-extra-components/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

    <link rel="alternate" type="application/rss+xml" title="Akilax0" href="https://akilax0.xyz//feed.xml" />

    <script>window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-f.fontawesome.com","baseUrlKit":"https://kit.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"id":7821852,"license":"free","method":"js","minify":{"enabled":true},"token":"d9b09040a7","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"v5FontFaceShim":{"enabled":true},"version":"6.4.2"};!function(t){"function"==typeof define&&define.amd?define("kit-loader",t):t()}((function(){"use strict";function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function e(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?t(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e,n){return(e=function(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,c,a=[],u=!0,f=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(a.push(r.value),a.length!==e);u=!0);}catch(t){f=!0,o=t}finally{try{if(!u&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(f)throw o}}return a}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){var n=e&&e.addOn||"",r=e&&e.baseFilename||t.license+n,o=e&&e.minify?".min":"",i=e&&e.fileSuffix||t.method,c=e&&e.subdir||t.method;return t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/"+c+"/"+r+o+"."+i}function a(t,e){var n=e||["fa"],r="."+Array.prototype.join.call(n,",."),o=t.querySelectorAll(r);Array.prototype.forEach.call(o,(function(e){var n=e.getAttribute("title");e.setAttribute("aria-hidden","true");var r=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only");if(n&&r){var o=t.createElement("span");o.innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling)}}))}var u,f=function(){},s="undefined"!=typeof global&&void 0!==global.process&&"function"==typeof global.process.emit,l="undefined"==typeof setImmediate?setTimeout:setImmediate,d=[];function h(){for(var t=0;t<d.length;t++)d[t][0](d[t][1]);d=[],u=!1}function m(t,e){d.push([t,e]),u||(u=!0,l(h,0))}function p(t){var e=t.owner,n=e._state,r=e._data,o=t[n],i=t.then;if("function"==typeof o){n="fulfilled";try{r=o(r)}catch(t){g(i,t)}}v(i,r)||("fulfilled"===n&&b(i,r),"rejected"===n&&g(i,r))}function v(t,e){var r;try{if(t===e)throw new TypeError("A promises callback cannot return that same promise.");if(e&&("function"==typeof e||"object"===n(e))){var o=e.then;if("function"==typeof o)return o.call(e,(function(n){r||(r=!0,e===n?y(t,n):b(t,n))}),(function(e){r||(r=!0,g(t,e))})),!0}}catch(e){return r||g(t,e),!0}return!1}function b(t,e){t!==e&&v(t,e)||y(t,e)}function y(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(A,t))}function g(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(S,t))}function w(t){t._then=t._then.forEach(p)}function A(t){t._state="fulfilled",w(t)}function S(t){t._state="rejected",w(t),!t._handled&&s&&global.process.emit("unhandledRejection",t._data,t)}function O(t){global.process.emit("rejectionHandled",t)}function j(t){if("function"!=typeof t)throw new TypeError("Promise resolver "+t+" is not a function");if(this instanceof j==!1)throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._then=[],function(t,e){function n(t){g(e,t)}try{t((function(t){b(e,t)}),n)}catch(t){n(t)}}(t,this)}j.prototype={constructor:j,_state:"pending",_then:null,_data:void 0,_handled:!1,then:function(t,e){var n={owner:this,then:new this.constructor(f),fulfilled:t,rejected:e};return!e&&!t||this._handled||(this._handled=!0,"rejected"===this._state&&s&&m(O,this)),"fulfilled"===this._state||"rejected"===this._state?m(p,n):this._then.push(n),n.then},catch:function(t){return this.then(null,t)}},j.all=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.all().");return new j((function(e,n){var r=[],o=0;function i(t){return o++,function(n){r[t]=n,--o||e(r)}}for(var c,a=0;a<t.length;a++)(c=t[a])&&"function"==typeof c.then?c.then(i(a),n):r[a]=c;o||e(r)}))},j.race=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.race().");return new j((function(e,n){for(var r,o=0;o<t.length;o++)(r=t[o])&&"function"==typeof r.then?r.then(e,n):e(r)}))},j.resolve=function(t){return t&&"object"===n(t)&&t.constructor===j?t:new j((function(e){e(t)}))},j.reject=function(t){return new j((function(e,n){n(t)}))};var E="function"==typeof Promise?Promise:j;function P(t,e){var n=e.fetch,r=e.XMLHttpRequest,o=e.token,i=t;return o&&!function(t){return t.indexOf("kit-upload.css")>-1}(t)&&("URLSearchParams"in window?(i=new URL(t)).searchParams.set("token",o):i=i+"?token="+encodeURIComponent(o)),i=i.toString(),new E((function(t,e){if("function"==typeof n)n(i,{mode:"cors",cache:"default"}).then((function(t){if(t.ok)return t.text();throw new Error("")})).then((function(e){t(e)})).catch(e);else if("function"==typeof r){var o=new r;o.addEventListener("loadend",(function(){this.responseText?t(this.responseText):e(new Error(""))}));["abort","error","timeout"].map((function(t){o.addEventListener(t,(function(){e(new Error(""))}))})),o.open("GET",i),o.send()}else{e(new Error(""))}}))}function _(t,e,n){var r=t;return[[/(url\("?)\.\.\/\.\.\/\.\./g,function(t,n){return"".concat(n).concat(e)}],[/(url\("?)\.\.\/webfonts/g,function(t,r){return"".concat(r).concat(e,"/releases/v").concat(n,"/webfonts")}],[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g,function(t,n){return"".concat(n).concat(e)}]].forEach((function(t){var e=o(t,2),n=e[0],i=e[1];r=r.replace(n,i)})),r}function F(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=n.document||o,i=a.bind(a,o,["fa","fab","fas","far","fal","fad","fak"]);t.autoA11y.enabled&&r(i);var u=t.subsetPath&&t.baseUrl+"/"+t.subsetPath,f=[{id:"fa-main",addOn:void 0,url:u}];if(t.v4shim&&t.v4shim.enabled&&f.push({id:"fa-v4-shims",addOn:"-v4-shims"}),t.v5FontFaceShim&&t.v5FontFaceShim.enabled&&f.push({id:"fa-v5-font-face",addOn:"-v5-font-face"}),t.v4FontFaceShim&&t.v4FontFaceShim.enabled&&f.push({id:"fa-v4-font-face",addOn:"-v4-font-face"}),!u&&t.customIconsCssPath){var s=t.customIconsCssPath.indexOf("kit-upload.css")>-1?t.baseUrlKit:t.baseUrl,l=s+"/"+t.customIconsCssPath;f.push({id:"fa-kit-upload",url:l})}var d=f.map((function(r){return new E((function(o,i){var a=r.url||c(t,{addOn:r.addOn,minify:t.minify.enabled}),u={id:r.id},f=t.subset?u:e(e(e({},n),u),{},{baseUrl:t.baseUrl,version:t.version,id:r.id,contentFilter:function(t,e){return _(t,e.baseUrl,e.version)}});P(a,n).then((function(t){o(C(t,f))})).catch(i)}))}));return E.all(d)}function C(t,e){var n=e.contentFilter||function(t,e){return t},r=document.createElement("style"),o=document.createTextNode(n(t,e));return r.appendChild(o),r.media="all",e.id&&r.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&r.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),r}function I(t,n){n.autoA11y=t.autoA11y.enabled,"pro"===t.license&&(n.autoFetchSvg=!0,n.fetchSvgFrom=t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/svgs",n.fetchUploadedSvgFrom=t.uploadsUrl);var r=[];return t.v4shim.enabled&&r.push(new E((function(r,o){P(c(t,{addOn:"-v4-shims",minify:t.minify.enabled}),n).then((function(t){r(U(t,e(e({},n),{},{id:"fa-v4-shims"})))})).catch(o)}))),r.push(new E((function(r,o){P(t.subsetPath&&t.baseUrl+"/"+t.subsetPath||c(t,{minify:t.minify.enabled}),n).then((function(t){var o=U(t,e(e({},n),{},{id:"fa-main"}));r(function(t,e){var n=e&&void 0!==e.autoFetchSvg?e.autoFetchSvg:void 0,r=e&&void 0!==e.autoA11y?e.autoA11y:void 0;void 0!==r&&t.setAttribute("data-auto-a11y",r?"true":"false");n&&(t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),t.setAttribute("data-fetch-svg-from",e.fetchSvgFrom),t.setAttribute("data-fetch-uploaded-svg-from",e.fetchUploadedSvgFrom));return t}(o,n))})).catch(o)}))),E.all(r)}function U(t,e){var n=document.createElement("SCRIPT"),r=document.createTextNode(t);return n.appendChild(r),n.referrerPolicy="strict-origin",e.id&&n.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n}function T(t){var e,n=[],r=document,o=r.documentElement.doScroll,i=(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);i||r.addEventListener("DOMContentLoaded",e=function(){for(r.removeEventListener("DOMContentLoaded",e),i=1;e=n.shift();)e()}),i?setTimeout(t,0):n.push(t)}function L(t){"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})}try{if(window.FontAwesomeKitConfig){var k=window.FontAwesomeKitConfig,x={detectingConflicts:k.detectConflictsUntil&&new Date<=new Date(k.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",fetch:window.fetch,token:k.token,XMLHttpRequest:window.XMLHttpRequest,document:document},M=document.currentScript,N=M?M.parentElement:document.head;(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"js"===t.method?I(t,e):"css"===t.method?F(t,e,(function(t){T(t),L(t)})):void 0})(k,x).then((function(t){t.map((function(t){try{N.insertBefore(t,M?M.nextSibling:null)}catch(e){N.appendChild(t)}})),x.detectingConflicts&&M&&T((function(){M.setAttributeNode(document.createAttribute(x.detectionIgnoreAttr));var t=function(t,e){var n=document.createElement("script");return e&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n.src=c(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),n}(k,x);document.body.appendChild(t)}))})).catch((function(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}))}}catch(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}}));</script>
    <style>
    
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:purple;font-weight:bold}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kn{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .n{color:#333}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.highlight .gc{color:#999;background-color:#EAF2F5}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#666;background:#fff}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#222;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:indigo;text-decoration:underline;font-weight:300}p{line-height:1.7;color:#666;font-weight:300;margin-bottom:20px;letter-spacing:.4px}@media only screen and (max-width: 400px){p{letter-spacing:.2px}}strong{font-weight:400;color:#000}ul li,ol li{line-height:2.4rem;font-weight:300;color:#666}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#575757;font-weight:300}@media only screen and (max-width: 400px){figcaption{font-size:1.2rem}}blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#fff;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#fff;border:1px solid #ededed;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}@media only screen and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:indigo}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#666}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#575757;font-weight:300;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#ededed;color:#666;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#ededed;color:#666;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:indigo}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#666}.author{padding:3rem 0;border-bottom:1px solid #ededed;border-top:1px solid #ededed;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}@media only screen and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#575757;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}@media only screen and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}.author>.toleft{width:10%;display:inline-block}@media only screen and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}.author>.toright{width:89%;display:inline-block;vertical-align:top}@media only screen and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #ededed;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#575757;font-weight:300;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#575757 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:indigo !important}.footer-main>.extra{color:#575757;margin-top:0;font-weight:300}.footer-main>.extra>.link{color:#222;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#575757}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:300;font-style:normal;color:#575757;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:300;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#666}.evidence{background-image:linear-gradient(to bottom, #27f36a26, #27f36a26);color:#222}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#27f36a26, #27f36a26)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#000;text-align:center;color:#575757;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:300}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}@media only screen and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#575757;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:300}.share{float:right;width:40%;display:inline;text-align:right;position:relative}@media only screen and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}@media only screen and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#fff;position:relative;top:0;margin:0;margin-right:4px;display:inherit}@media only screen and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}@media only screen and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}@media only screen and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#000}.social-links>.link:hover>svg{color:indigo}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}@media (prefers-color-scheme: dark){/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */;html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .hll{background-color:#272822}.highlight .c{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .c1{color:#75715e}.highlight .cs{color:#75715e}.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .il{color:#ae81ff}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#aaa;background:#000}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#ededed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#ededed;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:#9300ff;text-decoration:underline;font-weight:400}p{line-height:1.7;color:#aaa;font-weight:300;margin-bottom:20px;letter-spacing:.4px}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){p{letter-spacing:.2px}}@media (prefers-color-scheme: dark){strong{font-weight:400;color:#fff}ul li,ol li{line-height:2.4rem;font-weight:300;color:#aaa}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#999;font-weight:300}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){figcaption{font-size:1.2rem}}@media (prefers-color-scheme: dark){blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#000;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#000;border:1px solid #222;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}@media (prefers-color-scheme: dark){.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:#9300ff}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#aaa}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#999;font-weight:400;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#222;color:#aaa;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#222;color:#aaa;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:#9300ff}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#aaa}.author{padding:3rem 0;border-bottom:1px solid #222;border-top:1px solid #222;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;color:#999;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toleft{width:10%;display:inline-block}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}@media (prefers-color-scheme: dark){.author>.toright{width:89%;display:inline-block;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}@media (prefers-color-scheme: dark){.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #222;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#999;font-weight:400;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#999 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:#9300ff !important}.footer-main>.extra{color:#999;margin-top:0;font-weight:400}.footer-main>.extra>.link{color:#ededed;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#999}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:400;font-style:normal;color:#999;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:400;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#aaa}.evidence{background-image:linear-gradient(to bottom, #1E2D24, #1E2D24);color:#ededed}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#1E2D24, #1E2D24)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#fff;text-align:center;color:#999;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:400}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media (prefers-color-scheme: dark){.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#999;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:400}.share{float:right;width:40%;display:inline;text-align:right;position:relative}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media (prefers-color-scheme: dark){.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media (prefers-color-scheme: dark){.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#000;position:relative;top:0;margin:0;margin-right:4px;display:inherit}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}@media (prefers-color-scheme: dark){.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#fff}.social-links>.link:hover>svg{color:#9300ff}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}}

    </style>

</head>
<body>
    <div class="wrapper-normal">
        
            <div class="post">
        
<nav class="nav">
    <ul class="list">
        
            <li class="item">
                <a class="link" href="https://akilax0.xyz//">Home</a>
            </li>
        
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//blog">Blog</a>
                </li>
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//projects">Projects</a>
                </li>
            
        <!-- 
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//about">About</a>
                </li>
            
         -->

            <li class="item">
                <a class="link" href="https://akilax0.xyz/assets/files/AkilaCV.pdf">CV</a>
            </li>
        
    </ul>
</nav>

<h1 class="title">Markdown Extra Components</h1>

<span class="date">
    <time datetime="24-02-2016">Wednesday. February 24, 2016</time>
     - <span class="reading-time" title="Estimated read time">
    
        5 mins
    
</span>

</span>

    <div class="post-tags">
        
            <a class="item" href="https://akilax0.xyz//tags/#markdown">markdown</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#components">components</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#extra">extra</a>
        
    </div>

<h2 id="summary">Summary:</h2>

<p>You can pick as item to see how to apply in markdown.</p>

<h4 id="especial-elements">Especial Elements</h4>
<ul>
  <li><a href="#evidence">Evidence</a></li>
  <li><a href="#side-by-side">Side-by-Side</a></li>
  <li><a href="#star">Star</a></li>
  <li><a href="#especial-breaker">Especial Breaker</a></li>
  <li><a href="#spoiler">Spoiler</a></li>
</ul>

<h4 id="external-elements">External Elements</h4>
<ul>
  <li><a href="#gist">Gist</a></li>
  <li><a href="#codepen">Codepen</a></li>
  <li><a href="#slideshare">Slideshare</a></li>
  <li><a href="#videos">Videos</a></li>
</ul>

<hr />

<h2 id="evidence">Evidence</h2>

<p>You can try the evidence!</p>

<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">&gt;</span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt">&lt;/span&gt;</span></code></pre></figure>

<hr />

<h2 id="side-by-side">Side-by-side</h2>

<p>Like the <a href="https://medium.com/">Medium</a> component.</p>

<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

<hr />

<h2 id="star">Star</h2>

<p>You can give evidence to a post. Just add the tag to the markdown file.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>

<hr />

<h2 id="especial-breaker">Especial Breaker</h2>

<p>You can add a especial <em>hr</em> to your text.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="breaker"></div>

<hr />

<h2 id="spoiler">Spoiler</h2>

<p>You can add an especial hidden content that appears on hover.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">&gt;&lt;p&gt;</span>your content<span class="nt">&lt;/p&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

<hr />

<h2 id="gist">Gist</h2>

<p>You can add Gists from github.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>

<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>

<hr />

<h2 id="codepen">Codepen</h2>

<p>You can add Pens from Codepen.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">&gt;</span>
    See the Pen <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">&gt;</span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt">&lt;/a&gt;</span> by Chris Coyier (<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">&gt;</span>@chriscoyier<span class="nt">&lt;/a&gt;</span>) on <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">&gt;</span>CodePen<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>

<hr />

<h2 id="slideshare">Slideshare</h2>

<p>Add your presentations here!</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;</span> <span class="nt">&lt;/iframe&gt;</span></code></pre></figure>

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>

<hr />

<h2 id="videos">Videos</h2>

<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>

<p><strong>Example</strong></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span></code></pre></figure>

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>

    <div class="blog-navigation">
        
            <a class="prev" href="https://akilax0.xyz//markdown-common-elements/">&laquo; Markdown Common Elements</a>
        
            <a class="next" href="https://akilax0.xyz//welcome-to-jekyll/">Jekyll Setup &raquo;</a>
        
    </div>

    <div class="related">
    
                    <h4>Related Posts</h4>
                    <ul>
                    
                    <li class="relatedPost">
                        <a href="https://akilax0.xyz//markdown-common-elements/">Markdown Common Elements
                        
                        </a>
                    </li>
                    
        </ul>
    
</div>

    <section class="author">
    <div class="toleft">
        <img
            class="selfie"
            src="https://akilax0.xyz//"
            alt=""
        />
    </div>

    <div class="toright">
        <h4 class="name"></h4>
        <p class="bio"></p>

        <div class="share">
            <!-- Note: Only use three share links if your site width is set to large -->
            <!-- If site width is set to normal, you may choose any two share links -->
            <a
                class="twitter"
                href="https://twitter.com/intent/tweet?text=https://akilax0.xyz//markdown-extra-components/ - Markdown Extra Components by @"
            >
                <i class="fa-brands fa-twitter"></i>
                <span class="icon-twitter">Tweet</span>
            </a>

            <a
                class="facebook"
                href="javascript:void(0)"
                onclick="window.open('https://facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"
            >
                <i class="fa-brands fa-facebook"></i>
                <span class="icon-facebook-rect">Share</span>
            </a>

            <!-- <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://akilax0.xyz//markdown-extra-components/&amp;title=Markdown Extra Components&amp;summary=Markdown summary with different options&amp;source=https://akilax0.xyz/" target="_blank">
                <i class="fa-brands fa-linkedin"></i>
                <span class="icon-linkedin">Share</span>
            </a> -->
        </div>
    </div>
</section>

    <section class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">

        var disqus_config = function () {
            this.page.url = 'https://akilax0.xyz//markdown-extra-components/';
            this.page.identifier = '/markdown-extra-components';
        };
        var disqus_shortname = 'github';
        var disqus_developer = 0;
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>

<footer class="footer-main">
    Akilax0 © 2024

    <a class="link" href="https://akilax0.xyz//feed.xml" target="_blank" alt="anchor link to rss feed" aria-label="anchor link to rss feed">
        <i class="fa-solid fa-rss"></i>
    </a>

    <p class="extra">
        <a class="link" href="https://github.com/sergiokopplin/indigo">Indigo theme</a>
        by
        <a class="link" href="https://github.com/sergiokopplin/indigo">Kopplin</a>
    </p>
</footer>

            </div>
                </div>
            </div>
    </div>
</body>
</html>

</body>
</html>

https://jekyllrb.com/docs/variables/

Includes

Includes to be used on sites. Create a folder at root as _includes.

For example if defining a header to be included in the layouts create a file as header.html

<h1 style="color: ">Akilax0</h1>
<hr><br>

Then we can access them in the layouts as

<body>
    
<nav class="nav">
    <ul class="list">
        
            <li class="item">
                <a class="link" href="https://akilax0.xyz//">Home</a>
            </li>
        
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//blog">Blog</a>
                </li>
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//projects">Projects</a>
                </li>
            
        <!-- 
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//about">About</a>
                </li>
            
         -->

            <li class="item">
                <a class="link" href="https://akilax0.xyz/assets/files/AkilaCV.pdf">CV</a>
            </li>
        
    </ul>
</nav>

    <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=author content="Akilax0">

    <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Markdown Extra Components | Akilax0</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Markdown Extra Components" />
<meta name="author" content="jamesfoster" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Markdown summary with different options" />
<meta property="og:description" content="Markdown summary with different options" />
<link rel="canonical" href="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:url" content="https://akilax0.xyz//markdown-extra-components/" />
<meta property="og:site_name" content="Akilax0" />
<meta property="og:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2016-02-24T22:48:00+00:00" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://akilax0.xyz//assets/images/markdown.jpg" />
<meta property="twitter:title" content="Markdown Extra Components" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"jamesfoster"},"dateModified":"2016-02-24T22:48:00+00:00","datePublished":"2016-02-24T22:48:00+00:00","description":"Markdown summary with different options","headline":"Markdown Extra Components","image":"https://akilax0.xyz//assets/images/markdown.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://akilax0.xyz//markdown-extra-components/"},"url":"https://akilax0.xyz//markdown-extra-components/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://akilax0.xyz//assets/images/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://akilax0.xyz//assets/images/favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

    <link rel="alternate" type="application/rss+xml" title="Akilax0" href="https://akilax0.xyz//feed.xml" />

    <script>window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-f.fontawesome.com","baseUrlKit":"https://kit.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"id":7821852,"license":"free","method":"js","minify":{"enabled":true},"token":"d9b09040a7","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"v5FontFaceShim":{"enabled":true},"version":"6.4.2"};!function(t){"function"==typeof define&&define.amd?define("kit-loader",t):t()}((function(){"use strict";function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function e(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?t(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e,n){return(e=function(t){var e=function(t,e){if("object"!=typeof t||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,i,c,a=[],u=!0,f=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(a.push(r.value),a.length!==e);u=!0);}catch(t){f=!0,o=t}finally{try{if(!u&&null!=n.return&&(c=n.return(),Object(c)!==c))return}finally{if(f)throw o}}return a}}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){var n=e&&e.addOn||"",r=e&&e.baseFilename||t.license+n,o=e&&e.minify?".min":"",i=e&&e.fileSuffix||t.method,c=e&&e.subdir||t.method;return t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/"+c+"/"+r+o+"."+i}function a(t,e){var n=e||["fa"],r="."+Array.prototype.join.call(n,",."),o=t.querySelectorAll(r);Array.prototype.forEach.call(o,(function(e){var n=e.getAttribute("title");e.setAttribute("aria-hidden","true");var r=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only");if(n&&r){var o=t.createElement("span");o.innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling)}}))}var u,f=function(){},s="undefined"!=typeof global&&void 0!==global.process&&"function"==typeof global.process.emit,l="undefined"==typeof setImmediate?setTimeout:setImmediate,d=[];function h(){for(var t=0;t<d.length;t++)d[t][0](d[t][1]);d=[],u=!1}function m(t,e){d.push([t,e]),u||(u=!0,l(h,0))}function p(t){var e=t.owner,n=e._state,r=e._data,o=t[n],i=t.then;if("function"==typeof o){n="fulfilled";try{r=o(r)}catch(t){g(i,t)}}v(i,r)||("fulfilled"===n&&b(i,r),"rejected"===n&&g(i,r))}function v(t,e){var r;try{if(t===e)throw new TypeError("A promises callback cannot return that same promise.");if(e&&("function"==typeof e||"object"===n(e))){var o=e.then;if("function"==typeof o)return o.call(e,(function(n){r||(r=!0,e===n?y(t,n):b(t,n))}),(function(e){r||(r=!0,g(t,e))})),!0}}catch(e){return r||g(t,e),!0}return!1}function b(t,e){t!==e&&v(t,e)||y(t,e)}function y(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(A,t))}function g(t,e){"pending"===t._state&&(t._state="settled",t._data=e,m(S,t))}function w(t){t._then=t._then.forEach(p)}function A(t){t._state="fulfilled",w(t)}function S(t){t._state="rejected",w(t),!t._handled&&s&&global.process.emit("unhandledRejection",t._data,t)}function O(t){global.process.emit("rejectionHandled",t)}function j(t){if("function"!=typeof t)throw new TypeError("Promise resolver "+t+" is not a function");if(this instanceof j==!1)throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._then=[],function(t,e){function n(t){g(e,t)}try{t((function(t){b(e,t)}),n)}catch(t){n(t)}}(t,this)}j.prototype={constructor:j,_state:"pending",_then:null,_data:void 0,_handled:!1,then:function(t,e){var n={owner:this,then:new this.constructor(f),fulfilled:t,rejected:e};return!e&&!t||this._handled||(this._handled=!0,"rejected"===this._state&&s&&m(O,this)),"fulfilled"===this._state||"rejected"===this._state?m(p,n):this._then.push(n),n.then},catch:function(t){return this.then(null,t)}},j.all=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.all().");return new j((function(e,n){var r=[],o=0;function i(t){return o++,function(n){r[t]=n,--o||e(r)}}for(var c,a=0;a<t.length;a++)(c=t[a])&&"function"==typeof c.then?c.then(i(a),n):r[a]=c;o||e(r)}))},j.race=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.race().");return new j((function(e,n){for(var r,o=0;o<t.length;o++)(r=t[o])&&"function"==typeof r.then?r.then(e,n):e(r)}))},j.resolve=function(t){return t&&"object"===n(t)&&t.constructor===j?t:new j((function(e){e(t)}))},j.reject=function(t){return new j((function(e,n){n(t)}))};var E="function"==typeof Promise?Promise:j;function P(t,e){var n=e.fetch,r=e.XMLHttpRequest,o=e.token,i=t;return o&&!function(t){return t.indexOf("kit-upload.css")>-1}(t)&&("URLSearchParams"in window?(i=new URL(t)).searchParams.set("token",o):i=i+"?token="+encodeURIComponent(o)),i=i.toString(),new E((function(t,e){if("function"==typeof n)n(i,{mode:"cors",cache:"default"}).then((function(t){if(t.ok)return t.text();throw new Error("")})).then((function(e){t(e)})).catch(e);else if("function"==typeof r){var o=new r;o.addEventListener("loadend",(function(){this.responseText?t(this.responseText):e(new Error(""))}));["abort","error","timeout"].map((function(t){o.addEventListener(t,(function(){e(new Error(""))}))})),o.open("GET",i),o.send()}else{e(new Error(""))}}))}function _(t,e,n){var r=t;return[[/(url\("?)\.\.\/\.\.\/\.\./g,function(t,n){return"".concat(n).concat(e)}],[/(url\("?)\.\.\/webfonts/g,function(t,r){return"".concat(r).concat(e,"/releases/v").concat(n,"/webfonts")}],[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g,function(t,n){return"".concat(n).concat(e)}]].forEach((function(t){var e=o(t,2),n=e[0],i=e[1];r=r.replace(n,i)})),r}function F(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=n.document||o,i=a.bind(a,o,["fa","fab","fas","far","fal","fad","fak"]);t.autoA11y.enabled&&r(i);var u=t.subsetPath&&t.baseUrl+"/"+t.subsetPath,f=[{id:"fa-main",addOn:void 0,url:u}];if(t.v4shim&&t.v4shim.enabled&&f.push({id:"fa-v4-shims",addOn:"-v4-shims"}),t.v5FontFaceShim&&t.v5FontFaceShim.enabled&&f.push({id:"fa-v5-font-face",addOn:"-v5-font-face"}),t.v4FontFaceShim&&t.v4FontFaceShim.enabled&&f.push({id:"fa-v4-font-face",addOn:"-v4-font-face"}),!u&&t.customIconsCssPath){var s=t.customIconsCssPath.indexOf("kit-upload.css")>-1?t.baseUrlKit:t.baseUrl,l=s+"/"+t.customIconsCssPath;f.push({id:"fa-kit-upload",url:l})}var d=f.map((function(r){return new E((function(o,i){var a=r.url||c(t,{addOn:r.addOn,minify:t.minify.enabled}),u={id:r.id},f=t.subset?u:e(e(e({},n),u),{},{baseUrl:t.baseUrl,version:t.version,id:r.id,contentFilter:function(t,e){return _(t,e.baseUrl,e.version)}});P(a,n).then((function(t){o(C(t,f))})).catch(i)}))}));return E.all(d)}function C(t,e){var n=e.contentFilter||function(t,e){return t},r=document.createElement("style"),o=document.createTextNode(n(t,e));return r.appendChild(o),r.media="all",e.id&&r.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&r.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),r}function I(t,n){n.autoA11y=t.autoA11y.enabled,"pro"===t.license&&(n.autoFetchSvg=!0,n.fetchSvgFrom=t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/svgs",n.fetchUploadedSvgFrom=t.uploadsUrl);var r=[];return t.v4shim.enabled&&r.push(new E((function(r,o){P(c(t,{addOn:"-v4-shims",minify:t.minify.enabled}),n).then((function(t){r(U(t,e(e({},n),{},{id:"fa-v4-shims"})))})).catch(o)}))),r.push(new E((function(r,o){P(t.subsetPath&&t.baseUrl+"/"+t.subsetPath||c(t,{minify:t.minify.enabled}),n).then((function(t){var o=U(t,e(e({},n),{},{id:"fa-main"}));r(function(t,e){var n=e&&void 0!==e.autoFetchSvg?e.autoFetchSvg:void 0,r=e&&void 0!==e.autoA11y?e.autoA11y:void 0;void 0!==r&&t.setAttribute("data-auto-a11y",r?"true":"false");n&&(t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),t.setAttribute("data-fetch-svg-from",e.fetchSvgFrom),t.setAttribute("data-fetch-uploaded-svg-from",e.fetchUploadedSvgFrom));return t}(o,n))})).catch(o)}))),E.all(r)}function U(t,e){var n=document.createElement("SCRIPT"),r=document.createTextNode(t);return n.appendChild(r),n.referrerPolicy="strict-origin",e.id&&n.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n}function T(t){var e,n=[],r=document,o=r.documentElement.doScroll,i=(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);i||r.addEventListener("DOMContentLoaded",e=function(){for(r.removeEventListener("DOMContentLoaded",e),i=1;e=n.shift();)e()}),i?setTimeout(t,0):n.push(t)}function L(t){"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})}try{if(window.FontAwesomeKitConfig){var k=window.FontAwesomeKitConfig,x={detectingConflicts:k.detectConflictsUntil&&new Date<=new Date(k.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",fetch:window.fetch,token:k.token,XMLHttpRequest:window.XMLHttpRequest,document:document},M=document.currentScript,N=M?M.parentElement:document.head;(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"js"===t.method?I(t,e):"css"===t.method?F(t,e,(function(t){T(t),L(t)})):void 0})(k,x).then((function(t){t.map((function(t){try{N.insertBefore(t,M?M.nextSibling:null)}catch(e){N.appendChild(t)}})),x.detectingConflicts&&M&&T((function(){M.setAttributeNode(document.createAttribute(x.detectionIgnoreAttr));var t=function(t,e){var n=document.createElement("script");return e&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n.src=c(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),n}(k,x);document.body.appendChild(t)}))})).catch((function(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}))}}catch(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}}));</script>
    <style>
    
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:purple;font-weight:bold}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kn{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .n{color:#333}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.highlight .gc{color:#999;background-color:#EAF2F5}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#666;background:#fff}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#222;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:indigo;text-decoration:underline;font-weight:300}p{line-height:1.7;color:#666;font-weight:300;margin-bottom:20px;letter-spacing:.4px}@media only screen and (max-width: 400px){p{letter-spacing:.2px}}strong{font-weight:400;color:#000}ul li,ol li{line-height:2.4rem;font-weight:300;color:#666}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#575757;font-weight:300}@media only screen and (max-width: 400px){figcaption{font-size:1.2rem}}blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#fff;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#fff;border:1px solid #ededed;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}@media only screen and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:indigo}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#666}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#575757;font-weight:300;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#ededed;color:#666;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #ededed;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#ededed;color:#666;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:indigo}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#575757;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#666}.author{padding:3rem 0;border-bottom:1px solid #ededed;border-top:1px solid #ededed;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}@media only screen and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#575757;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}@media only screen and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}.author>.toleft{width:10%;display:inline-block}@media only screen and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}.author>.toright{width:89%;display:inline-block;vertical-align:top}@media only screen and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #ededed;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#575757;font-weight:300;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#ededed 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#fff;box-shadow:#fff 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#575757 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:indigo !important}.footer-main>.extra{color:#575757;margin-top:0;font-weight:300}.footer-main>.extra>.link{color:#222;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#575757}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:300;font-style:normal;color:#575757;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:300;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#666}.evidence{background-image:linear-gradient(to bottom, #27f36a26, #27f36a26);color:#222}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#27f36a26, #27f36a26)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#000;text-align:center;color:#575757;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:300}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}@media only screen and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#575757;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:300}.share{float:right;width:40%;display:inline;text-align:right;position:relative}@media only screen and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}@media only screen and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#fff;position:relative;top:0;margin:0;margin-right:4px;display:inherit}@media only screen and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}@media only screen and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}@media only screen and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#000}.social-links>.link:hover>svg{color:indigo}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}@media (prefers-color-scheme: dark){/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */;html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.highlight .hll{background-color:#272822}.highlight .c{color:#75715e}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#66d9ef}.highlight .l{color:#ae81ff}.highlight .n{color:#f8f8f2}.highlight .o{color:#f92672}.highlight .p{color:#f8f8f2}.highlight .cm{color:#75715e}.highlight .cp{color:#75715e}.highlight .c1{color:#75715e}.highlight .cs{color:#75715e}.highlight .ge{font-style:italic}.highlight .gs{font-weight:bold}.highlight .kc{color:#66d9ef}.highlight .kd{color:#66d9ef}.highlight .kn{color:#f92672}.highlight .kp{color:#66d9ef}.highlight .kr{color:#66d9ef}.highlight .kt{color:#66d9ef}.highlight .ld{color:#e6db74}.highlight .m{color:#ae81ff}.highlight .s{color:#e6db74}.highlight .na{color:#a6e22e}.highlight .nb{color:#f8f8f2}.highlight .nc{color:#a6e22e}.highlight .no{color:#66d9ef}.highlight .nd{color:#a6e22e}.highlight .ni{color:#f8f8f2}.highlight .ne{color:#a6e22e}.highlight .nf{color:#a6e22e}.highlight .nl{color:#f8f8f2}.highlight .nn{color:#f8f8f2}.highlight .nx{color:#a6e22e}.highlight .py{color:#f8f8f2}.highlight .nt{color:#f92672}.highlight .nv{color:#f8f8f2}.highlight .ow{color:#f92672}.highlight .w{color:#f8f8f2}.highlight .mf{color:#ae81ff}.highlight .mh{color:#ae81ff}.highlight .mi{color:#ae81ff}.highlight .mo{color:#ae81ff}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#ae81ff}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .sr{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#e6db74}.highlight .bp{color:#f8f8f2}.highlight .vc{color:#f8f8f2}.highlight .vg{color:#f8f8f2}.highlight .vi{color:#f8f8f2}.highlight .il{color:#ae81ff}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e}body,html{font-size:62.5%}body{font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#aaa;background:#000}h1,h2,h3,h4{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#ededed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1{font-size:3rem;letter-spacing:-1px;color:#ededed;font-weight:700}h2{font-size:2.2rem}h3{font-size:2rem}h4{font-size:1.6rem}a{color:#9300ff;text-decoration:underline;font-weight:400}p{line-height:1.7;color:#aaa;font-weight:300;margin-bottom:20px;letter-spacing:.4px}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){p{letter-spacing:.2px}}@media (prefers-color-scheme: dark){strong{font-weight:400;color:#fff}ul li,ol li{line-height:2.4rem;font-weight:300;color:#aaa}img,pre,iframe{max-width:100%}img,pre{border-radius:4px}figcaption{position:relative;top:-20px;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;color:#999;font-weight:300}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){figcaption{font-size:1.2rem}}@media (prefers-color-scheme: dark){blockquote{padding-left:15px;border-left:3px solid #eee}hr{border:none;height:1px;margin:40px auto;background:#eee;width:100%}figure.highlight{width:100%;margin:0}code{padding:2px 3px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;vertical-align:middle;background:#eee;border-radius:2px}pre>code,tt{padding:1px 0;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;background:#000;border-radius:2px}pre{box-sizing:border-box;margin:0 0 1.75em 0;width:100%;padding:5px 10px;font-family:"Consolas",Liberation Mono,Menlo,Courier,monospace;font-size:1.2rem;line-height:2rem;overflow:auto;background:#000;border:1px solid #222;border-radius:2px}.wrapper-normal,.wrapper-large{height:100%;width:96%;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.wrapper-normal,.wrapper-large{width:88%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.wrapper-normal,.wrapper-large{width:88%}}@media (prefers-color-scheme: dark){.wrapper-normal{max-width:560px}.wrapper-large{max-width:810px}.text-center{text-align:center}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.animated{animation:fade-in-down .6s;animation-delay:.3s;animation-fill-mode:both}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}.home,.blog,.projects{margin-top:125px}.home>.list,.blog>.list,.projects>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.home>.list:before,.blog>.list:before,.projects>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.home>.list>.item,.blog>.list>.item,.projects>.list>.item{display:block;width:95%;margin:0 auto}.home>.list>.item>.url,.blog>.list>.item>.url,.projects>.list>.item>.url{width:100%;display:block;padding:20px 0;text-decoration:none}.home>.list>.item>.url>.title,.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{margin:0;width:75%;font-weight:500;transition:all ease-in-out .2s}.home>.list>.item:hover>.url>.title,.blog>.list>.item:hover>.url>.title,.projects>.list>.item:hover>.url>.title{color:#9300ff}.home>.list aside,.blog>.list aside,.projects>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s}.home>.list .item:hover .url aside,.blog>.list .item:hover .url aside,.projects>.list .item:hover .url aside{color:#aaa}.blog>.list>.item>.url>.title,.projects>.list>.item>.url>.title{display:inline}.blog>.list>.item>.url>.emoji,.projects>.list>.item>.url>.emoji{display:inline;position:relative;top:-4px;margin-right:10px}.page{margin-top:125px}.page>h1{text-align:center;margin-bottom:6rem}.about img{width:50%;margin:0 auto;display:block}.post{margin-top:125px}.post>.title{text-align:center;margin-bottom:3rem}.post>.date,.post>.post-tags{color:#999;font-weight:400;font-size:1.4rem;text-transform:uppercase;text-align:center;display:block;margin-bottom:6rem;letter-spacing:1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.post>.date{margin-bottom:2rem}.post>.post-tags>.item{padding:2px 8px;border-radius:3px;font-size:1.1rem;background:#222;color:#aaa;letter-spacing:1px;margin:3px 1px;text-decoration:none;display:inline-block}.post>h2,.post>h3,.post>h4{margin-top:40px}.post>h2 a,.post>h3 a,.post>h4 a{text-decoration:none}.post>.title-image{max-height:120px;display:block;margin:0 auto}.post>.blog-navigation{font-size:1.4rem;display:block;width:auto;overflow:hidden}.post>.blog-navigation a{display:block;width:50%;float:left;margin:1em 0}.post>.blog-navigation .next{text-align:right}.tags{margin-top:125px}.tags>.list{border-top:1px solid #222;margin-top:30px;padding-top:40px;position:relative}.tags>.list:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.tags>.list>.item{font-weight:300;text-transform:uppercase;text-align:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:3px 9px;border-radius:3px;font-size:1.3rem;background:#222;color:#aaa;letter-spacing:1px;margin:0 .5rem 1rem;text-decoration:none;display:inline-block}.tag-list>.list{padding:0}.tag-list>.list>.item{display:block;width:80%;margin:0 10%}.tag-list>.list>.item>.url{width:100%;height:100%;display:block;padding:20px 0;text-decoration:none}.tag-list>.list>.item>.url>.title{margin:0;width:75%;font-weight:400;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list>.item:hover>.url>.title{color:#9300ff}.tag-list>.list aside{position:relative;top:2px;margin:0;width:25%;float:right;font-weight:300;color:#999;text-align:right;transition:all ease-in-out .2s;font-size:1.6rem}.tag-list>.list .item:hover .url aside{color:#aaa}.author{padding:3rem 0;border-bottom:1px solid #222;border-top:1px solid #222;max-width:100%;margin:4rem auto 0}.author>.toleft>.selfie{width:90%;border-radius:100%}.author>.toright>.name,.author>.toright>.bio{width:60%;display:inline-block}.author>.toright>.name{font-size:1.5rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;margin:6px 0 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.name{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.name{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toright>.bio{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;color:#999;font-size:1.3rem;text-align:justify;line-height:1.5;margin:0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright>.bio{width:100%;display:block}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright>.bio{width:100%;display:block}}@media (prefers-color-scheme: dark){.author>.toleft{width:10%;display:inline-block}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toleft{width:20%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toleft{width:20%}}@media (prefers-color-scheme: dark){.author>.toright{width:89%;display:inline-block;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.author>.toright{width:78%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.author>.toright{width:78%}}@media (prefers-color-scheme: dark){.no-disqus{border-bottom:none;padding-bottom:0}.disqus{margin:0 auto;max-width:100%;padding:40px 0}.footer-main{border-top:1px solid #222;padding:40px 0;margin:40px 0 0;font-size:1.3rem;color:#999;font-weight:400;text-align:center;position:relative}.footer-main:before{display:block;content:" ";width:7px;height:7px;border:#222 1px solid;position:absolute;top:-5px;left:50%;margin-left:-5px;background:#000;box-shadow:#000 0 0 0 5px;border-radius:3px}.footer-main>.copyright{padding-left:10px}.footer-main>.link{display:inline;vertical-align:middle}.footer-main>.link>.icon{width:15px !important;fill:#999 !important;transition:ease-in-out all .3s;position:relative;display:inherit;top:-2px;margin:0;left:2px}.footer-main>.link>.icon:hover{fill:#9300ff !important}.footer-main>.extra{color:#999;margin-top:0;font-weight:400}.footer-main>.extra>.link{color:#ededed;text-decoration:none;border-bottom:1px solid transparent;transition:ease-in-out all .3s;padding-bottom:1px;font-weight:300}.footer-main>.extra>.link:hover{border-color:#999}.header-home{display:block;margin:0 auto;text-align:center;position:relative;z-index:99}.header-home>.link>.selfie{width:125px;height:125px;margin-bottom:25px;border-radius:100%;transition:all .2s;opacity:1}.header-home>.link>.selfie:hover{box-shadow:0 0px 4px 0 rgba(0,0,0,0.18),0 0px 12px 0 rgba(0,0,0,0.15);opacity:.8}.header-home>.title{font-size:4rem;margin:0 0 13px}.header-home>.description{font-size:1.85rem;font-weight:400;font-style:normal;color:#999;width:70%;margin:0 auto 30px}.header-home>.description a{font-weight:200}.nav>.list,.nav-home>.list{list-style:none;margin:0;padding:0 13px 0}.nav>.list>.item,.nav-home>.list>.item{display:inline-block}.nav>.list>.item>.link,.nav-home>.list>.item>.link{display:inline-block;font-weight:400;font-size:1.4rem;padding:20px 10px;text-decoration:none}.nav{position:absolute;right:0;top:0}.nav>.list{padding:0 13px 0}.nav>.list>.item>.link{font-size:1.4rem;padding:20px 10px}.nav-home{margin-top:40px;text-align:center}.nav-home>.list{padding:0}.nav-home>.list>.item>.link{font-size:2rem;padding:7px 15px;margin:0;border-radius:4%;transition:all .4s ease-in-out;width:70px}.nav-home>.list>.item>.link:hover{color:#aaa}.evidence{background-image:linear-gradient(to bottom, #1E2D24, #1E2D24);color:#ededed}.star>.url>.title{width:auto !important;display:inline;background-image:linear-gradient(#1E2D24, #1E2D24)}.twitter-tweet{margin:10px auto}.icon{display:inline-block;width:17px;height:17px;fill:#fff;text-align:center;color:#999;margin:7px auto}.caption{position:relative;top:1rem;left:0;right:0;margin:0 auto;width:100%;text-align:center;font-size:1.3rem;font-weight:400}.bigger-image{min-width:130%;margin:5rem 0 5rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.bigger-image{min-width:114%;margin:2rem 0 2rem -7%}}@media (prefers-color-scheme: dark){.breaker{height:1px;margin:6rem auto;width:100%}.breaker:before{content:"• • •";width:100%;text-align:center;display:block;color:#999;letter-spacing:4px;position:relative;top:-8px}.lost-container{text-align:center}.related{margin:10rem 0 0rem}.related a{font-weight:400}.share{float:right;width:40%;display:inline;text-align:right;position:relative}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share{width:100%;display:block;top:0;text-align:left;float:none;margin-top:5px}}@media (prefers-color-scheme: dark){.share>.twitter,.share>.facebook,.share>.linkedin{display:inline;vertical-align:middle;font-size:13px;font-weight:700;color:#fff;padding:6px 10px;border-radius:3px;margin-left:5px;text-decoration:none}}@media only screen and (prefers-color-scheme: dark) and (max-width: 400px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 400px) and (max-width: 1050px){.share>.twitter,.share>.facebook,.share>.linkedin{margin:0 5px 10px 0}}@media (prefers-color-scheme: dark){.share>.twitter{background:#4fafed}.share>.facebook{background:#4361b3}.share>.linkedin{background:#0077b5}.share svg{fill:#000;position:relative;top:0;margin:0;margin-right:4px;display:inherit}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side{width:130%;margin:6rem 0 6rem -15%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side{width:100%;margin:4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft,.side-by-side>.toright{display:inline-block;width:47.5%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft img,.side-by-side>.toright img{text-align:center;display:block;margin:0 auto}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toleft{margin-right:2%}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft{width:100%;margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (min-width: 780px){.side-by-side>.toright{margin-left:2%;vertical-align:top}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toright{width:100%;margin:0 0 4rem 0}}@media (prefers-color-scheme: dark){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0 0 4rem 0}}@media only screen and (prefers-color-scheme: dark) and (max-width: 780px){.side-by-side>.toleft>p,.side-by-side>.toright>p{margin:0}}@media (prefers-color-scheme: dark){.social-links>.link{margin:0;text-decoration:none;position:relative;display:inline-block;height:35px;width:35px;color:#fff}.social-links>.link:hover>svg{color:#9300ff}.social-links>svg{transition:all ease-in-out .2s}.spoiler{position:relative}.spoiler:before{content:"";background-color:#fafae0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:50}.spoiler:hover:before{display:none}}

    </style>

</head>
<body>
    <div class="wrapper-normal">
        
            <div class="post">
        
<nav class="nav">
    <ul class="list">
        
            <li class="item">
                <a class="link" href="https://akilax0.xyz//">Home</a>
            </li>
        
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//blog">Blog</a>
                </li>
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//projects">Projects</a>
                </li>
            
        <!-- 
            
                <li class="item">
                    <a class="link" href="https://akilax0.xyz//about">About</a>
                </li>
            
         -->

            <li class="item">
                <a class="link" href="https://akilax0.xyz/assets/files/AkilaCV.pdf">CV</a>
            </li>
        
    </ul>
</nav>

<h1 class="title">Markdown Extra Components</h1>

<span class="date">
    <time datetime="24-02-2016">Wednesday. February 24, 2016</time>
     - <span class="reading-time" title="Estimated read time">
    
        5 mins
    
</span>

</span>

    <div class="post-tags">
        
            <a class="item" href="https://akilax0.xyz//tags/#markdown">markdown</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#components">components</a>
        
            <a class="item" href="https://akilax0.xyz//tags/#extra">extra</a>
        
    </div>

<h2 id="summary">Summary:</h2>

<p>You can pick as item to see how to apply in markdown.</p>

<h4 id="especial-elements">Especial Elements</h4>
<ul>
  <li><a href="#evidence">Evidence</a></li>
  <li><a href="#side-by-side">Side-by-Side</a></li>
  <li><a href="#star">Star</a></li>
  <li><a href="#especial-breaker">Especial Breaker</a></li>
  <li><a href="#spoiler">Spoiler</a></li>
</ul>

<h4 id="external-elements">External Elements</h4>
<ul>
  <li><a href="#gist">Gist</a></li>
  <li><a href="#codepen">Codepen</a></li>
  <li><a href="#slideshare">Slideshare</a></li>
  <li><a href="#videos">Videos</a></li>
</ul>

<hr />

<h2 id="evidence">Evidence</h2>

<p>You can try the evidence!</p>

<p><span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"evidence"</span><span class="nt">&gt;</span>Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.<span class="nt">&lt;/span&gt;</span></code></pre></figure>

<hr />

<h2 id="side-by-side">Side-by-side</h2>

<p>Like the <a href="https://medium.com/">Medium</a> component.</p>

<p><strong>Image</strong> on the left and <strong>Text</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<p><strong>Text</strong> on the left and <strong>Image</strong> on the right:</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"side-by-side"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toleft"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toright"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"https://akilax0.xyz//assets/images/profile.jpg"</span> <span class="na">alt=</span><span class="s">"Alt Text"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>Photo by John Doe<span class="nt">&lt;/figcaption&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="https://akilax0.xyz//assets/images/profile.jpg" alt="Alt Text" />
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

<hr />

<h2 id="star">Star</h2>

<p>You can give evidence to a post. Just add the tag to the markdown file.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">star: true</code></pre></figure>

<hr />

<h2 id="especial-breaker">Especial Breaker</h2>

<p>You can add a especial <em>hr</em> to your text.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"breaker"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="breaker"></div>

<hr />

<h2 id="spoiler">Spoiler</h2>

<p>You can add an especial hidden content that appears on hover.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spoiler"</span><span class="nt">&gt;&lt;p&gt;</span>your content<span class="nt">&lt;/p&gt;&lt;/div&gt;</span></code></pre></figure>

<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>

<hr />

<h2 id="gist">Gist</h2>

<p>You can add Gists from github.</p>

<figure class="highlight"><pre><code class="language-raw" data-lang="raw">{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }</code></pre></figure>

<script src="https://gist.github.com/sergiokopplin/91ff4220480727b47224245ee2e9c291.js"> </script>

<hr />

<h2 id="codepen">Codepen</h2>

<p>You can add Pens from Codepen.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">data-height=</span><span class="s">"268"</span> <span class="na">data-theme-id=</span><span class="s">"0"</span> <span class="na">data-slug-hash=</span><span class="s">"gfdDu"</span> <span class="na">data-default-tab=</span><span class="s">"result"</span> <span class="na">data-user=</span><span class="s">"chriscoyier"</span> <span class="na">class=</span><span class="s">'codepen'</span><span class="nt">&gt;</span>
    See the Pen <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier/pen/gfdDu/'</span><span class="nt">&gt;</span>Crappy Recreation of the Book Cover of *The Flame Alphabet*<span class="nt">&lt;/a&gt;</span> by Chris Coyier (<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io/chriscoyier'</span><span class="nt">&gt;</span>@chriscoyier<span class="nt">&lt;/a&gt;</span>) on <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">'https://codepen.io'</span><span class="nt">&gt;</span>CodePen<span class="nt">&lt;/a&gt;</span>.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//assets.codepen.io/assets/embed/ei.js"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class="codepen">See the Pen <a href="https://codepen.io/chriscoyier/pen/gfdDu/">Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>

<hr />

<h2 id="slideshare">Slideshare</h2>

<p>Add your presentations here!</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">src=</span><span class="s">"//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l"</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">marginwidth=</span><span class="s">"0"</span> <span class="na">marginheight=</span><span class="s">"0"</span> <span class="na">scrolling=</span><span class="s">"no"</span> <span class="na">style=</span><span class="s">"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;</span> <span class="nt">&lt;/iframe&gt;</span></code></pre></figure>

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen=""> </iframe>

<hr />

<h2 id="videos">Videos</h2>

<p>Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!</p>

<p><strong>Example</strong></p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;iframe</span> <span class="na">width=</span><span class="s">"560"</span> <span class="na">height=</span><span class="s">"310"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/r7XhWUDj-Ts"</span> <span class="na">frameborder=</span><span class="s">"0"</span> <span class="na">allowfullscreen</span><span class="nt">&gt;&lt;/iframe&gt;</span></code></pre></figure>

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen=""></iframe>

    <div class="blog-navigation">
        
            <a class="prev" href="https://akilax0.xyz//markdown-common-elements/">&laquo; Markdown Common Elements</a>
        
            <a class="next" href="https://akilax0.xyz//welcome-to-jekyll/">Jekyll Setup &raquo;</a>
        
    </div>

    <div class="related">
    
                    <h4>Related Posts</h4>
                    <ul>
                    
                    <li class="relatedPost">
                        <a href="https://akilax0.xyz//markdown-common-elements/">Markdown Common Elements
                        
                        </a>
                    </li>
                    
        </ul>
    
</div>

    <section class="author">
    <div class="toleft">
        <img
            class="selfie"
            src="https://akilax0.xyz//"
            alt=""
        />
    </div>

    <div class="toright">
        <h4 class="name"></h4>
        <p class="bio"></p>

        <div class="share">
            <!-- Note: Only use three share links if your site width is set to large -->
            <!-- If site width is set to normal, you may choose any two share links -->
            <a
                class="twitter"
                href="https://twitter.com/intent/tweet?text=https://akilax0.xyz//markdown-extra-components/ - Markdown Extra Components by @"
            >
                <i class="fa-brands fa-twitter"></i>
                <span class="icon-twitter">Tweet</span>
            </a>

            <a
                class="facebook"
                href="javascript:void(0)"
                onclick="window.open('https://facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"
            >
                <i class="fa-brands fa-facebook"></i>
                <span class="icon-facebook-rect">Share</span>
            </a>

            <!-- <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://akilax0.xyz//markdown-extra-components/&amp;title=Markdown Extra Components&amp;summary=Markdown summary with different options&amp;source=https://akilax0.xyz/" target="_blank">
                <i class="fa-brands fa-linkedin"></i>
                <span class="icon-linkedin">Share</span>
            </a> -->
        </div>
    </div>
</section>

    <section class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">

        var disqus_config = function () {
            this.page.url = 'https://akilax0.xyz//markdown-extra-components/';
            this.page.identifier = '/markdown-extra-components';
        };
        var disqus_shortname = 'github';
        var disqus_developer = 0;
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>

<footer class="footer-main">
    Akilax0 © 2024

    <a class="link" href="https://akilax0.xyz//feed.xml" target="_blank" alt="anchor link to rss feed" aria-label="anchor link to rss feed">
        <i class="fa-solid fa-rss"></i>
    </a>

    <p class="extra">
        <a class="link" href="https://github.com/sergiokopplin/indigo">Indigo theme</a>
        by
        <a class="link" href="https://github.com/sergiokopplin/indigo">Kopplin</a>
    </p>
</footer>

            </div>
                </div>
            </div>
    </div>
</body>
</html>

</body>

Here the variable color is passed back to the header file.

Looping through posts

Lets say want to loop through posts and display on a home.html

    <li><a href="/Autonomous-Landmine-Detector-copy/">Autonomous Landmine Detector</a></li>

    <li><a href="/Vehicle-Number-Plate-Analyzer/">Vehicle Number Plate Analyzer</a></li>

    <li><a href="/Compiler-for-Cool-Language/">Compiler for Cool Language</a></li>

    <li><a href="/Analysis-Tool-for-Industrial-Images/">Analysis Tool for Industrial Images</a></li>

    <li><a href="/Multi-Processor-System-on-Cip(MPSoC)/">Multi-Processor System-on-Chip (MPSoC)</a></li>

    <li><a href="/CRC-using-custom-NiosII-processor-copy/">CRC using custom NiosII processor</a></li>

    <li><a href="/8-bit-processor/">8 bit Processor</a></li>

    <li><a href="/Fractal-Generator/">Fractal Generator</a></li>

    <li><a href="/Image-Processing-techniques-to-detect-damaged-fruit/">Image Processing techniques to detect damaged fruit</a></li>

    <li><a href="/Hospital-Management-System/">Hospital Management System</a></li>

    <li><a href="/Time-Complexity/">Time Complexity</a></li>

    <li><a href="/Sorting/">Sorting</a></li>

    <li><a href="/Searching/">Searching</a></li>

    <li><a href="/Graph-Theory/">Graph Theory</a></li>

    <li><a href="/Dynamic-Programming/">Dynamic Programming</a></li>

    <li><a href="/Data-Structures/">Data Structures</a></li>

    <li><a href="/Programming/">Programming</a></li>

    <li><a href="/Arch/">Arch Install</a></li>

    <li><a href="/docker/">Docker</a></li>

    <li><a href="/c-notes/">C Notes</a></li>

    <li><a href="/welcome-to-jekyll/">Jekyll Setup</a></li>

    <li><a href="/markdown-extra-components/">Markdown Extra Components</a></li>

    <li><a href="/markdown-common-elements/">Markdown Common Elements</a></li>

    <li><a href="/indigo-jekyll-theme/">:ramen: Indigo, minimalist jekyll theme</a></li>

loops through the posts and lists the links of each post. Also can be done for other categories/layouts as well.

Conditionals

Checking for conditions in each page.

Color the current post red

Data Files

Can create in

YAML
JSON
CSV

These files are stored under _data folder.

Can be accessed as

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.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.