<!DOCTYPE html>
|
<html lang="en-us">
|
<head><meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="description" content="A brief description of Hugo Shortcodes">
|
<meta name="author" content="Hugo Authors">
|
<link rel="icon" href="/ticky_tacky_dark/favicon.ico">
|
|
<title>Ticky Tacky Dark - Rich Content</title>
|
|
|
|
|
<meta name="robots" content="index,follow">
|
<meta name="referrer" content="origin-when-cross-origin">
|
|
|
|
|
<meta name="generator" content="Hugo 0.63.1">
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
|
<link rel="stylesheet" href="/ticky_tacky_dark/css/myscreen.css" type="text/css" media="screen">
|
<link rel="stylesheet" href="/ticky_tacky_dark/css/myprint.css" type="text/css" media="print">
|
<meta name="theme-color" content="black">
|
|
|
|
<noscript>
|
<style>
|
|
#headerimg {
|
background-image: url(https://kc0bfv.github.io/ticky_tacky_dark/img/header01.jpg);
|
background-size: cover;
|
}
|
|
|
#sideimage {
|
background-image: url(https://kc0bfv.github.io/ticky_tacky_dark/img/rich01.jpg);
|
background-size: cover;
|
}
|
|
</style>
|
</noscript>
|
</head>
|
<body>
|
<div id="full_body">
|
<header id="header" class="top-section"><img id="headerimg" class="veryrounded" src="/ticky_tacky_dark/img/header_template.png" alt="">
|
</header>
|
<div id="content" class="top-section">
|
<div class="container-fluid">
|
<div class="row">
|
<div class="col col-12 col-sm-8 col-lg-9">
|
<main class="row">
|
<div class="col-12 col-sm-5">
|
|
<img id="sideimage" class="morerounded" src="/ticky_tacky_dark/img/side_image_template.png" alt="Looking out on a pond at Capilano Suspension Bridge, Vancouver, BC">
|
|
</div>
|
<div class="col-12 col-sm-7">
|
<p>Hugo ships with several <a href="https://gohugo.io/content-management/shortcodes/#use-hugo-s-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="instagram-simple-shortcode">Instagram Simple Shortcode</h2>
|
|
|
|
|
<style type="text/css">
|
.__h_instagram.card {
|
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
font-size: 14px;
|
border: 1px solid rgb(219, 219, 219);
|
padding: 0;
|
margin-top: 30px;
|
}
|
.__h_instagram.card .card-header, .__h_instagram.card .card-body {
|
padding: 10px 10px 10px;
|
}
|
.__h_instagram.card img {
|
width: 100%;
|
height: auto;
|
}
|
</style>
|
|
<div class="__h_instagram s_instagram_simple card" style="max-width: 640px">
|
<div class="card-header">
|
<a href="https://www.instagram.com/koloot.design" class="card-link">koloot.design</a>
|
</div>
|
<a href="https://instagram.com/p/BGvuInzyFAe/" rel="noopener" target="_blank"><img class="card-img-top img-fluid" src="https://scontent-ort2-2.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/13437259_1631155187211476_646101738_n.jpg?_nc_ht=scontent-ort2-2.cdninstagram.com&_nc_cat=108&_nc_ohc=feZCxlyiJ54AX8n3FDD&oh=bf9b4fa6ccd7aa282253a32339e55b3f&oe=5EC3AE71" width="640" height="451" alt="Instagram Image"></a>
|
<div class="card-body">
|
|
<a href="https://www.instagram.com/koloot.design" class="card-link">View More on Instagram</a>
|
</div>
|
</div>
|
|
<!-- raw HTML omitted -->
|
<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>
|
|
</main>
|
</div>
|
<nav class="col col-8 offset-2 col-sm-4 offset-sm-0 col-lg-3"><div class="box morerounded">
|
<ul class="navbar">
|
<li><a href="https://kc0bfv.github.io/ticky_tacky_dark/">Main</a></li>
|
<li><a href="https://kc0bfv.github.io/ticky_tacky_dark/about/">About</a></li>
|
<li><a href="https://github.com/kc0bfv/ticky_tacky_dark">Theme Source</a></li>
|
<li><a href="https://kc0bfv.github.io/ticky_tacky_dark/markdown-syntax/">Markdown Syntax Guide</a></li>
|
<li><a href="https://kc0bfv.github.io/ticky_tacky_dark/emoji-support/">Emoji Support</a></li>
|
<li>Rich Content</li>
|
<li><a href="https://kc0bfv.github.io/ticky_tacky_dark/math-typesetting/">Math Typesetting</a></li>
|
</ul>
|
</div>
|
</nav>
|
</div>
|
</div>
|
</div>
|
<footer id="footer" class="top-section">Webmaster: <a href="mailto:kc0bfv@gmail.com">kc0bfv@gmail.com</a>
|
</footer><script>
|
function toggleDisplay( elementID ) {
|
elem = document.getElementById(elementID);
|
if( elem.style.display == "none" ) {
|
elem.style.display = "block";
|
} else if( elem.style.display == "block" ) {
|
elem.style.display = "none";
|
}
|
}
|
|
function randomHeaderImg() {
|
images = ["https://kc0bfv.github.io/ticky_tacky_dark/img/header01.jpg","https://kc0bfv.github.io/ticky_tacky_dark/img/header02.jpg"];
|
i = Math.ceil(Math.random() * images.length) - 1;
|
document.getElementById("headerimg").src = images[i];
|
}
|
window.onload = randomHeaderImg;
|
|
|
function randomSideAndHeaderImg() {
|
randomHeaderImg();
|
images = ["https://kc0bfv.github.io/ticky_tacky_dark/img/rich01.jpg"];
|
i = Math.ceil(Math.random() * images.length) - 1;
|
document.getElementById("sideimage").src = images[i];
|
}
|
window.onload = randomSideAndHeaderImg;
|
|
</script>
|
</div>
|
</body>
|
</html>
|
