mirror of https://github.com/kc0bfv/ticky_tacky_dark.git
rich-content/index.html
@@ -8,8 +8,9 @@ <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="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"/> @@ -22,7 +23,7 @@ <meta name="referrer" content="origin-when-cross-origin"> <meta name="generator" content="Hugo 0.74.3" /> <meta name="generator" content="Hugo 0.89.2" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> @@ -109,40 +110,6 @@ <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-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/13437259_1631155187211476_646101738_n.jpg?_nc_ht=scontent-ort2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=7u9DY9qA4eMAX_3rwpn&oh=d20437f98a5d466be42a0c29dbd6b4d1&oe=5F4FA50F" 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> <hr> <h2 id="youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</h2> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> @@ -152,27 +119,23 @@ <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> <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> @@ -181,6 +144,7 @@ <style> .__h_video { position: relative; @@ -212,7 +176,7 @@ <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"> <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> @@ -226,7 +190,6 @@ <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> <li><a href="https://kc0bfv.github.io/ticky_tacky_dark/math-typesetting/">Math Typesetting</a></li> </ul> </div> </nav>
