mirror of https://github.com/jpanther/congo.git
120 lines
6.9 KiB
HTML
120 lines
6.9 KiB
HTML
|
<!doctype html><html lang=en-au><head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<meta http-equiv=content-language content="en-AU">
|
||
|
|
<meta name=viewport content="width=device-width,initial-scale=1">
|
||
|
|
<meta http-equiv=x-ua-compatible content="ie=edge">
|
||
|
|
<title>Rich Content · Congo</title>
|
||
|
|
<meta name=title content="Rich Content · Congo">
|
||
|
|
<meta name=description content="A brief description of Hugo Shortcodes">
|
||
|
|
<base href=https://jpanther.github.io/Congo/>
|
||
|
|
<link rel=canonical href=https://jpanther.github.io/Congo/blog/rich-content/>
|
||
|
|
<link type=text/css rel=stylesheet href=https://jpanther.github.io/Congo/css/main.css>
|
||
|
|
<link rel=apple-touch-icon sizes=180x180 href=https://jpanther.github.io/apple-touch-icon.png>
|
||
|
|
<link rel=icon type=image/png sizes=32x32 href=https://jpanther.github.io/favicon-32x32.png>
|
||
|
|
<link rel=icon type=image/png sizes=16x16 href=https://jpanther.github.io/favicon-16x16.png>
|
||
|
|
<link rel=manifest href=https://jpanther.github.io/site.webmanifest>
|
||
|
|
<meta property="og:title" content="Rich Content">
|
||
|
|
<meta property="og:description" content="A brief description of Hugo Shortcodes">
|
||
|
|
<meta property="og:type" content="article">
|
||
|
|
<meta property="og:url" content="https://jpanther.github.io/Congo/blog/rich-content/"><meta property="article:section" content="blog">
|
||
|
|
<meta property="article:published_time" content="2019-03-10T00:00:00+00:00">
|
||
|
|
<meta property="article:modified_time" content="2019-03-10T00:00:00+00:00">
|
||
|
|
<meta name=twitter:card content="summary">
|
||
|
|
<meta name=twitter:title content="Rich Content">
|
||
|
|
<meta name=twitter:description content="A brief description of Hugo Shortcodes">
|
||
|
|
<meta name=generator content="Hugo 0.87.0">
|
||
|
|
<meta name=author content="Freddy Blogger">
|
||
|
|
<link href=https://twitter.com/ rel=me>
|
||
|
|
<link href=https://github.com/ rel=me>
|
||
|
|
<link href=https://linkedin.com/ rel=me>
|
||
|
|
</head>
|
||
|
|
<body class="flex flex-col h-screen px-8 text-lg leading-7 text-grey-900 sm:px-14 md:px-24 lg:px-32 dark:bg-gray-800 dark:text-white"><header class="flex justify-between py-10 font-semibold">
|
||
|
|
<div>
|
||
|
|
<a class=hover:underline rel=me href=https://jpanther.github.io/Congo/>Congo</a>
|
||
|
|
</div>
|
||
|
|
<nav>
|
||
|
|
<ul class="flex list-none">
|
||
|
|
<li class="mr-7 last:mr-0">
|
||
|
|
<a class=hover:underline href=/Congo/blog/ title=Blog>Blog</a>
|
||
|
|
</li>
|
||
|
|
<li class="mr-7 last:mr-0">
|
||
|
|
<a class=hover:underline href=/Congo/about/ title=About>About</a>
|
||
|
|
</li>
|
||
|
|
<li class="mr-7 last:mr-0">
|
||
|
|
<a class=hover:underline href=tags title>Tags</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<main class=flex-grow>
|
||
|
|
<article class=max-w-prose>
|
||
|
|
<header>
|
||
|
|
<h1 class="mt-0 text-4xl font-extrabold">Rich Content</h1>
|
||
|
|
<div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
|
||
|
|
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
|
||
|
|
<span class=px-1>·</span>
|
||
|
|
<span title="Reading time">
|
||
|
|
1
|
||
|
|
min
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<section class="prose dark:prose-light">
|
||
|
|
<p>Hugo ships with several <a href=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes>Built-in Shortcodes</a> for rich content, along with a <a href=https://gohugo.io/about/hugo-and-gdpr/>Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p>
|
||
|
|
<h2 id=heading> <a class=heading-anchor href=#heading aria-label=Anchor>#</a> </h2>
|
||
|
|
<h2 id=youtube-privacy-enhanced-shortcode>YouTube Privacy Enhanced Shortcode <a class=heading-anchor href=#youtube-privacy-enhanced-shortcode aria-label=Anchor>#</a> </h2>
|
||
|
|
<div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden>
|
||
|
|
<iframe src=https://www.youtube.com/embed/ZJthWmvUzzc style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<h2 id=twitter-simple-shortcode>Twitter Simple Shortcode <a class=heading-anchor href=#twitter-simple-shortcode aria-label=Anchor>#</a> </h2>
|
||
|
|
<style type=text/css>.twitter-tweet{font:14px/1.45 '-apple-system',BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;border-left:4px solid #2b7bb9;padding-left:1.5em;color:#555}.twitter-tweet a{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus{text-decoration:underline}</style>
|
||
|
|
<blockquote class=twitter-tweet><p lang=en dir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>— Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote>
|
||
|
|
<hr>
|
||
|
|
<h2 id=vimeo-simple-shortcode>Vimeo Simple Shortcode <a class=heading-anchor href=#vimeo-simple-shortcode aria-label=Anchor>#</a> </h2>
|
||
|
|
<style>.__h_video{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;width:100%;background:#000}.__h_video img{width:100%;height:auto;color:#000}.__h_video .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;cursor:pointer}</style>
|
||
|
|
<div class="s_video_simple __h_video">
|
||
|
|
<a href=https://vimeo.com/4.8912912e+07 rel=noopener target=_blank>
|
||
|
|
<img src=https://i.vimeocdn.com/video/337401969_640 srcset="https://i.vimeocdn.com/video/337401969_640 1x, https://i.vimeocdn.com/video/337401969_640 2x" alt="Sing Jan Swing - Kinetic Type">
|
||
|
|
<div class=play><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"/><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2.0-4.4l-16.6-9z" fill="#fff"/></svg></div></a></div>
|
||
|
|
</section>
|
||
|
|
<footer>
|
||
|
|
<div class="flex items-center pt-8">
|
||
|
|
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="https://i.pravatar.cc/150?img=11">
|
||
|
|
<div>
|
||
|
|
<div class="font-semibold leading-6 text-gray-800 dark:text-gray-300">
|
||
|
|
Freddy Blogger
|
||
|
|
</div>
|
||
|
|
<div class="flex text-lg text-gray-400 dark:text-gray-500">
|
||
|
|
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank title=Twitter><span class="relative inline-block align-text-bottom icon">
|
||
|
|
icons/twitter-brands.svg
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://github.com/ target=_blank title=GitHub><span class="relative inline-block align-text-bottom icon">
|
||
|
|
icons/github-brands.svg
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a class="mr-2 hover:text-primary-700 dark:hover:text-primary-400" href=https://linkedin.com/ target=_blank title=Linkedin><span class="relative inline-block align-text-bottom icon">
|
||
|
|
icons/linkedin-brands.svg
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
</main><footer class="py-10 text-sm">
|
||
|
|
<p class="text-gray-400 dark:text-gray-500">
|
||
|
|
©
|
||
|
|
2021
|
||
|
|
Freddy Blogger
|
||
|
|
</p>
|
||
|
|
<p class="text-xs text-gray-300 dark:text-gray-600">
|
||
|
|
Powered by
|
||
|
|
<a class=hover:underline href=https://gohugo.io/ target=_blank>Hugo</a>
|
||
|
|
&
|
||
|
|
<a class=hover:underline href=https://git.io/hugo-congo target=_blank>Congo</a>
|
||
|
|
</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|