274 lines
9.7 KiB
HTML
274 lines
9.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" data-theme=""><head>
|
||
|
|
<title> Glenn | Rich Content </title>
|
||
|
|
|
||
|
|
|
||
|
|
<meta charset="utf-8"><meta name="generator" content="Hugo 0.74.3" /><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
|
|
<meta name="description" content="A bit of personal space for writing">
|
||
|
|
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://example.com/css/style.min.9a6700e4461b50dccdddfc4f81dc65d77e7fca22c35665e398a0c36568db59c7.css"
|
||
|
|
integrity="sha256-mmcA5EYbUNzN3fxPgdxl135/yiLDVmXjmKDDZWjbWcc="
|
||
|
|
crossorigin="anonymous"
|
||
|
|
type="text/css">
|
||
|
|
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://example.com/css/markupHighlight.min.cc84ed683057cc175ddfa738ea6ba2d5c882b95cb64f50bf9be918cb3791887b.css"
|
||
|
|
integrity="sha256-zITtaDBXzBdd36c46mui1ciCuVy2T1C/m+kYyzeRiHs="
|
||
|
|
crossorigin="anonymous"
|
||
|
|
type="text/css">
|
||
|
|
|
||
|
|
<link rel="stylesheet"
|
||
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
|
||
|
|
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
|
||
|
|
crossorigin="anonymous" />
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="https://example.com/favicons/favicon.ico" type="image/x-icon">
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/favicons/apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://example.com/favicons/favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://example.com/favicons/favicon-16x16.png">
|
||
|
|
|
||
|
|
<link rel="canonical" href="https://example.com/post/rich-content/">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://example.com/js/anatole-header.min.d8599ee07b7d3f11bafbac30657ccc591e8d7fd36a9f580cd4c09e24e0e4a971.js"
|
||
|
|
integrity="sha256-2Fme4Ht9PxG6+6wwZXzMWR6Nf9Nqn1gM1MCeJODkqXE="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://example.com/js/anatole-theme-switcher.min.e289e9ebb2a4e7a7f895859c8a2b0da2de1ec73f22cea58d8475aa0597023837.js"
|
||
|
|
integrity="sha256-4onp67Kk56f4lYWciisNot4exz8izqWNhHWqBZcCODc="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
||
|
|
<meta name="twitter:image" content="https://example.com/images/site-feature-image.png"/>
|
||
|
|
|
||
|
|
<meta name="twitter:title" content="Rich Content"/>
|
||
|
|
<meta name="twitter:description" content="A brief description of Hugo Shortcodes"/>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body><div class="sidebar animated fadeInDown ">
|
||
|
|
<div class="logo-title">
|
||
|
|
<div class="title">
|
||
|
|
<img src="https://example.com/images/site-logo.png" alt="profile picture">
|
||
|
|
<h3 title=""><a href="/">Caffeinated</a></h3>
|
||
|
|
<div class="description">
|
||
|
|
<p>A bit of personal space for writing</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul class="social-links">
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://de.linkedin.com/" rel="me" aria-label="Linkedin">
|
||
|
|
<i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://github.com/lxndrblz/anatole/" rel="me" aria-label="GitHub">
|
||
|
|
<i class="fab fa-github fa-2x" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://www.instagram.com/" rel="me" aria-label="instagram">
|
||
|
|
<i class="fab fa-instagram fa-2x" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="mailto:mail@alexbilz.com" rel="me" aria-label="e-mail">
|
||
|
|
<i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
<div class="footer">
|
||
|
|
<div class="by_farbox">© Glenn 2021 </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="main">
|
||
|
|
<div class="page-top animated fadeInDown ">
|
||
|
|
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
<span aria-hidden="true"></span>
|
||
|
|
</a>
|
||
|
|
<ul class="nav" id="navMenu">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li><a
|
||
|
|
href="/"
|
||
|
|
|
||
|
|
title="">Home</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
<li><a
|
||
|
|
href="/post/"
|
||
|
|
|
||
|
|
title="">Posts</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
<li><a
|
||
|
|
href="/about/"
|
||
|
|
|
||
|
|
title="">About</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
<li><a
|
||
|
|
href="/contact/"
|
||
|
|
|
||
|
|
title="">Contact</a></li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="theme-switch-item">
|
||
|
|
<a class="theme-switch" title="Switch Theme">
|
||
|
|
<i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="autopagerize_page_element">
|
||
|
|
<div class="content">
|
||
|
|
<div class="post animated fadeInDown ">
|
||
|
|
<div class="post-content">
|
||
|
|
|
||
|
|
<div class="post-title">
|
||
|
|
<h3>Rich Content</h3>
|
||
|
|
|
||
|
|
<div class="info">
|
||
|
|
<em class="fas fa-calendar-day"></em>
|
||
|
|
<span class="date"> Sun, Mar 10, 2019
|
||
|
|
</span>
|
||
|
|
<em class="fas fa-stopwatch"></em>
|
||
|
|
<span class="reading-time">One-minute read</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<hr>
|
||
|
|
<h2 id="youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</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>
|
||
|
|
|
||
|
|
<!-- raw HTML omitted -->
|
||
|
|
<hr>
|
||
|
|
<h2 id="twitter-simple-shortcode">Twitter Simple Shortcode</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>
|
||
|
|
|
||
|
|
<!-- raw HTML omitted -->
|
||
|
|
<hr>
|
||
|
|
<h2 id="vimeo-simple-shortcode">Vimeo Simple Shortcode</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.jpg" srcset="https://i.vimeocdn.com/video/337401969_640.jpg 1x, https://i.vimeocdn.com/video/337401969.jpg 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"></circle><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"></path></svg></div></a></div></div>
|
||
|
|
<div class="post-footer">
|
||
|
|
<div class="info">
|
||
|
|
|
||
|
|
<span class="separator"><a class="tag" href="/tags/shortcodes/">shortcodes</a><a class="tag" href="/tags/privacy/">privacy</a></span>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://example.com/js/jquery.min.86b1e8f819ee2d9099a783e50b49dff24282545fc40773861f9126b921532e4c.js"
|
||
|
|
integrity="sha256-hrHo+BnuLZCZp4PlC0nf8kKCVF/EB3OGH5EmuSFTLkw="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://example.com/js/bundle.min.0f9c74cb78f13d1f15f33daff4037c70354f98acfbb97a6f61708966675c3cae.js"
|
||
|
|
integrity="sha256-D5x0y3jxPR8V8z2v9AN8cDVPmKz7uXpvYXCJZmdcPK4="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="https://example.com/js/medium-zoom.min.92f21c856129f84aeb719459b3e6ac621a3032fd7b180a18c04e1d12083f8aba.js"
|
||
|
|
integrity="sha256-kvIchWEp+ErrcZRZs+asYhowMv17GAoYwE4dEgg/iro="
|
||
|
|
crossorigin="anonymous"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|