1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
<!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">
<title>Ticky Tacky Dark - Rich Content</title>
<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"><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://kc0bfv.github.io/ticky_tacky_dark/rich-content/" /><meta property="og:image" content="https://kc0bfv.github.io/ticky_tacky_dark/img/rich01.jpg" /><meta property="article:section" content="" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://kc0bfv.github.io/ticky_tacky_dark/img/rich01.jpg"/>
<meta name="twitter:title" content="Rich Content"/>
<meta name="twitter:description" content="A brief description of Hugo Shortcodes"/>
<meta name="robots" content="index,follow">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="theme-color" content="black">
<meta name="generator" content="Hugo 0.105.0">
<link rel="stylesheet" href="/ticky_tacky_dark/css/custom.min.434d878244725c63e8bb3920d68a315d2aa4234915a33e045fe01ad3c2838617.css" integrity="sha256-Q02HgkRyXGPouzkg1ooxXSqkI0kVoz4EX+Aa08KDhhc="/>
<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>
<script>
function randomImg(dest_elem, images) {
const img_ind = Math.ceil(Math.random() * images.length) - 1;
const sel_url = images[img_ind]
const img = new Image();
img.onload = function() {
function set_img() {
const element = document.getElementById(dest_elem);
element.src = sel_url;
}
if( document.readyState != "loading" ) { set_img() }
else { window.addEventListener("load", set_img); }
}
img.src = sel_url;
}
randomImg(
dest_elem = "headerimg",
images = ["https://kc0bfv.github.io/ticky_tacky_dark/img/header01.jpg","https://kc0bfv.github.io/ticky_tacky_dark/img/header02.jpg"]
);
randomImg(
dest_elem = "sideimage",
images = ["https://kc0bfv.github.io/ticky_tacky_dark/img/rich01.jpg"]
);
</script>
</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="">
<div id="header-text">tickytackydark</div></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="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>
<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>
<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-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640" srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 1x, https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_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"></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://kc0bfv.github.io/ticky_tacky_dark/markdown-syntax/">Markdown Syntax Guide</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/emoji-support/">Emoji Support</a></li>
<li>Rich Content</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></div>
</body>
</html>
|
